CSS设置div高度为屏幕高度|极客教程

CSS设置div高度为屏幕高度

在网页开发中，有时候我们需要让一个div元素的高度和屏幕的高度保持一致，这样可以让页面看起来更加美观和整洁。在本文中，我们将探讨如何使用纯CSS来实现这一功能。

方法一：使用vh单位

CSS3引入了新的长度单位vh（视窗高度），1vh等于视窗高度的1%，即1/100。通过将div元素的高度设置为100vh，我们可以确保其高度和屏幕高度一致。以下是一个简单的示例代码：

div {
    height: 100vh;
    background-color: lightblue;
    color: white;
    text-align: center;
    padding: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Div</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
    This div will take up the full screen height.
</div>
</body>
</html>

当以上代码在浏览器中运行时，你会看到一个占据整个屏幕高度的div元素，背景颜色为浅蓝色，内部文本为白色。这是因为我们将div的高度设置为100vh，使其与屏幕高度保持一致。

方法二：使用calc()函数

除了vh单位外，我们还可以使用calc()函数来实现div高度等于屏幕高度的效果。通过计算视窗高度减去已知高度的值，我们可以将div的高度设置为屏幕高度。以下是一个示例代码：

div {
    height: calc(100vh - 50px);
    background-color: lightblue;
    color: white;
    text-align: center;
    padding: 20px;
}

在这个示例中，我们将div的高度设置为视窗高度减去50px，这样div的高度将与屏幕高度保持一致，同时留出50px的空间。你可以根据实际需要设置不同的数值。

方法三：使用JavaScript

如果以上方法无法满足你的需求，你还可以使用JavaScript来动态计算div的高度。通过获取屏幕高度并将其赋值给div的高度属性，我们可以实现div高度等于屏幕高度的效果。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Div</title>
<style>
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .full-screen {
        height: 100%;
        background-color: lightblue;
        color: white;
        text-align: center;
        padding: 20px;
    }
</style>
</head>
<body>
<div class="full-screen" id="fullScreenDiv">
    This div will take up the full screen height.
</div>

<script>
    window.onload = function() {
        var fullScreenDiv = document.getElementById('fullScreenDiv');
        fullScreenDiv.style.height = window.innerHeight + 'px';
    }
</script>
</body>
</html>

在这个示例中，我们通过JavaScript获取屏幕的高度，并将其赋值给div元素的高度属性，以确保div的高度和屏幕高度保持一致。