CSS 设置 div 元素的视口高度

在本文中，我们将介绍如何使用 CSS 来设置 div 元素的视口高度。Viewport 是指用户在浏览器中实际看到的区域，它的高度随窗口的大小而变化。有时候我们希望将一个 div 元素的高度设置为视口的高度，以便实现全屏适应效果或者其他一些特殊效果。下面我们将详细介绍如何使用 CSS 来实现这一目标。

阅读更多：CSS 教程

方法一：使用百分比

一种常见的方法是使用百分比来设置 div 元素的高度。我们可以将 div 的高度设置为100%，这样 div 元素的高度将会自动调整为视口的高度。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        #fullscreen {
            height: 100%;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="fullscreen">
        这是一个全屏适应的 div 元素。
    </div>
</body>
</html>

在上面的示例中，我们使用了一个 id 选择器来选中这个 div 元素，并给它设置了一个背景颜色。当我们在浏览器中打开这个页面时，我们会发现这个 div 元素始终与视口的高度保持一致，无论我们调整窗口的大小。

方法二：使用 vh 单位

除了百分比，我们还可以使用 vh （viewport height）单位来设置 div 元素的高度。vh 单位表示视口高度的百分比，例如 1vh 表示视口高度的 1%。我们可以通过将 vh 单位与一个整数相乘来设置 div 元素的高度。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        #fullscreen {
            height: 50vh;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="fullscreen">
        这是一个占视口高度一半的 div 元素。
    </div>
</body>
</html>

在上面的示例中，我们将 div 的高度设置为 50vh，这意味着它将占据视口高度的一半。当我们在浏览器中打开这个页面时，我们会发现这个 div 元素的高度始终是视口高度的一半，无论我们调整窗口的大小。

方法三：使用 JavaScript

如果以上方法无法满足我们的需求，我们还可以使用 JavaScript 来动态设置 div 元素的高度。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        #fullscreen {
            background-color: lightblue;
        }
    </style>
    <script>
        window.onload = function() {
            var fullscreen = document.getElementById("fullscreen");
            fullscreen.style.height = window.innerHeight + "px";
        }
    </script>
</head>
<body>
    <div id="fullscreen">
        这是一个动态设置高度的 div 元素。
    </div>
</body>
</html>

在上面的示例中，我们使用了 JavaScript 的 window.innerHeight 属性来获取视口的高度，并将其赋值给 div 的高度。当页面加载完成后，JavaScript 代码会自动执行，将 div 元素的高度设置为视口的高度。无论我们怎么调整窗口的大小，这个 div 元素的高度都会与视口的高度保持一致。