在css布局中，开发者常遇到设置元素height: 100%却无法覆盖整个屏幕高度的问题。这通常是由于百分比高度依赖于其父元素的高度所致。本文将深入解析height: 100%失效的根本原因，并提供使用css视口单位100vh的可靠解决方案，确保元素能够准确占据浏览器视口的完整高度。
为什么height: 100%可能无法覆盖整个屏幕？
在CSS布局中，我们经常希望某个元素能占据浏览器视口的全部高度。直观上，我们可能会尝试使用height: 100%。然而，这种方法常常无法达到预期效果，元素的高度似乎只与其内容的高度相当，而非整个屏幕。
核心原因在于百分比高度的计算机制：height: 100%表示元素的高度为其父元素高度的100%。如果其父元素没有明确设置高度，或者其父元素的高度本身也是height: 100%而上溯链条中没有一个固定高度的祖先元素，那么这个百分比高度最终会解析为auto，即由内容撑开的高度。
考虑以下初始HTML和CSS代码：
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<body>
<section id="Block1">
<div class="firstsection">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo magnam iusto quibusdam quas reiciendis fugit architecto consequatur similique distinctio dolore repudiandae rem illo alias iure sunt eos culpa, amet consectetur!</p>
</div>
</section>
</body>CSS 样式：
body {
width: 100%;
height: 100%; /* 试图让body占据100%高度 */
}
* {
padding: 0px;
margin: 0px;
}
.firstsection {
width: 50%;
height: 100%; /* 试图让该div占据父元素100%高度 */
background-color: yellowgreen;
text-align: center;
}
#Block1 {
width: 100%;
height: 100%; /* 试图让该section占据父元素100%高度 */
}尽管在上述代码中，.firstsection、#Block1和body都被设置了height: 100%，但最终.firstsection的高度仍然可能只与其中文字内容的高度相当。这是因为body的父元素是html，而html元素默认情况下也没有明确的高度。因此，body的height: 100%无法正确继承，导致整个高度链条失效。要使height: 100%从根部生效，通常需要同时设置html, body { height: 100%; }。
引入视口单位vh：更直接的解决方案
为了更简洁、更可靠地让元素占据浏览器视口的完整高度，CSS3引入了视口单位（Viewport Units）。其中，vh（viewport height）是解决此问题的理想选择。
什么是vh？vh代表视口高度的百分比。具体来说：
- 1vh 等于视口高度的1%。
- 100vh 等于视口高度的100%。
这意味着，无论其父元素的高度如何，设置height: 100vh的元素将直接参照浏览器视口的高度进行计算。这彻底解耦了元素高度对父元素高度的依赖，使其能够稳定地覆盖整个可视区域。
解决方案与示例代码
要解决上述问题，只需将body元素的高度从height: 100%修改为height: 100vh。
修改后的CSS样式：
body {
width: 100%;
height: 100vh; /* 关键改动：使用100vh */
}
* {
padding: 0px;
margin: 0px;
}
.firstsection {
width: 50%;
height: 100%; /* 此时为父元素#Block1的100%，即100vh */
background-color: yellowgreen;
text-align: center;
}
#Block1 {
width: 100%;
height: 100%; /* 此时为父元素body的100%，即100vh */
}完整示例代码： 将上述HTML结构与修改后的CSS样式结合，即可实现.firstsection元素占据整个视口高度的效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用100vh实现全屏高度布局</title>
<style>
/* CSS 样式 */
body {
width: 100%;
height: 100vh; /* 核心解决方案 */
}
/* 通用重置，消除浏览器默认边距和填充 */
* {
padding: 0;
margin: 0;
/* 可选：为了更精确的布局控制，可以添加box-sizing */
/* box-sizing: border-box; */
}
#Block1 {
width: 100%;
height: 100%; /* 继承body的100vh */
}
.firstsection {
width: 50%;
height: 100%; /* 继承#Block1的100%，即100vh */
background-color: yellowgreen;
text-align: center;
display: flex; /* 示例：为了内容居中，可以进一步使用flex布局 */
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
margin-bottom: 10px;
color: #333;
}
p {
max-width: 80%; /* 限制段落宽度，提高可读性 */
line-height: 1.6;
color: #555;
}
</style>
</head>
<body>
<section id="Block1">
<div class="firstsection">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo magnam iusto quibusdam quas 
