vh与%的区别：为何banner高度从100vh改100%显示异常？

代码对比 #

修改前（使用100vh）：

.banner {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
    background-size: cover;
    background-position: center;
}

修改后（使用100%）：

.banner {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
    background-size: cover;
    background-position: center;
}

显示效果差异 #

• 用100vh时：banner会完全铺满当前浏览器的可见窗口高度，不管页面内容多少，始终保持全屏状态。
• 用100%时：banner高度会收缩到自身内容的高度，无法铺满全屏。

核心原因 #

CSS里的百分比高度是相对于父元素的已定义高度来计算的。如果.banner的父元素（比如<html>、<body>）没有设置明确的height值，浏览器就找不到计算基准，此时height: 100%会失效，元素高度自动适配内容。

而100vh是视口单位，直接对应浏览器可见区域的高度（1vh = 视口高度的1%），完全不受父元素高度设置的影响，所以能稳定实现全屏效果。

用100%实现全屏的方法 #

当然可以，只需要给所有层级的父元素设置明确的高度：

html, body {
    height: 100%;
    margin: 0; /* 清除默认边距，避免出现不必要的滚动条 */
}
.banner {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
    background-size: cover;
    background-position: center;
}

这样设置后，<html>和<body>的高度会铺满视口，.banner作为子元素，height: 100%就会继承父元素的高度，达到和100vh一样的全屏效果。

内容的提问来源于stack exchange，提问作者Amir Saudagar