极客笔记CSS设置div高度为屏幕高度
1. 介绍
在前端开发中，经常会遇到需要将某个 div 元素的高度设置为屏幕高度的需求。这样可以实现满屏效果，使页面的内容在垂直方向上占满整个屏幕，给用户更好的浏览体验。
本文将详细介绍如何使用 CSS 来设置 div 元素的高度为屏幕高度，并提供一些示例代码以及运行结果供读者参考。
2. 使用 vh 单位设置高度
CSS3 中引入了一种新的长度单位 vh，表示视口（Viewport）的高度的百分比。1vh 等于视口高度的 1%，视口的高度即为浏览器窗口的高度。
要将 div 元素的高度设置为屏幕高度，可以使用以下 CSS 代码：
div {
height: 100vh;
}
在上述代码中，我们使用 100vh 将 div 元素的高度设置为 100% 的视口高度，即完全占满整个屏幕。
3. 示例代码
3.1 设置整个页面的背景颜色
我们可以先设置一个整个页面的背景颜色，然后将 div 元素的高度设置为屏幕高度。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: #f5f5f5;
}
div {
height: 100vh;
background-color: white;
text-align: center;
line-height: 100vh;
font-size: 2rem;
}
</style>
</head>
<body>
<div>这是一个满屏的 div 元素</div>
</body>
</html>
在上述代码中，我们设置了 body 的背景颜色为 #f5f5f5，即浅灰色。然后，我们将 div 元素的高度设置为屏幕高度，背景颜色为白色，并居中显示文字。通过 line-height 和 font-size 属性，我们将文字在垂直方向上居中显示在 div 元素中。
3.2 设置 div 的内部元素垂直居中
有时候，我们还需要将 div 内部的元素垂直居中。可以通过设置 div 的 display 属性为 flex，并使用 align-items 属性将内部元素垂直居中。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: #f5f5f5;
}
div {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: white;
}
p {
font-size: 2rem;
}
</style>
</head>
<body>
<div>
<p>这是一个垂直居中的 div 元素</p>
</div>
</body>
</html>
在上述代码中，我们设置了 div 的 display 属性为 flex，这样可以将内部元素水平排列，并通过 align-items: center; 将内部元素垂直居中显示。注意，我们还使用了 justify-content: center; 将内部元素水平居中。
4. 运行结果
4.1 示例代码1运行结果
执行示例代码1后，将会显示一个满屏的 div 元素，背景颜色为白色，文字居中显示在垂直方向上。请参考下图：
+-----------------------+
| |
| |
| 这是一个满屏的 div 元素 |
| |
| |
+-----------------------+
4.2 示例代码2运行结果
执行示例代码2后，将会显示一个满屏的 div 元素，背景颜色为白色，内部的文字垂直居中显示。请参考下图：
+-----------------------+
| |
| 这是一个垂直居中的div元素 |
| |
+-----------------------+
5. 总结
通过使用 CSS 的 vh 单位，我们可以很方便地将 div 元素的高度设置为屏幕的高度，实现满屏效果。同时，我们还可以使用其他 CSS 属性来对 div 元素进行进一步样式的设置，例如设置背景颜色、文本对齐方式等。