在css布局中，开发者常遇到设置元素height: 100%却无法覆盖整个屏幕高度的问题。这通常是由于百分比高度依赖于其父元素的高度所致。本文将深入解析height: 100%失效的根本原因，并提供使用css视口单位100vh的可靠解决方案，确保元素能够准确占据浏览器视口的完整高度。

为什么height: 100%可能无法覆盖整个屏幕？

在CSS布局中，我们经常希望某个元素能占据浏览器视口的全部高度。直观上，我们可能会尝试使用height: 100%。然而，这种方法常常无法达到预期效果，元素的高度似乎只与其内容的高度相当，而非整个屏幕。

核心原因在于百分比高度的计算机制：height: 100%表示元素的高度为其父元素高度的100%。如果其父元素没有明确设置高度，或者其父元素的高度本身也是height: 100%而上溯链条中没有一个固定高度的祖先元素，那么这个百分比高度最终会解析为auto，即由内容撑开的高度。

考虑以下初始HTML和CSS代码：

HTML 结构：

立即学习“前端免费学习笔记（深入）”；

    

        

            
Lorem Ipsum
            
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!
        
    

CSS 样式：

Digram

让Figma更好用的AI神器

下载

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元素占据整个视口高度的效果。

    
    
    
    


    

        

            
Lorem Ipsum
            
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo magnam iusto quibusdam quas