在网页布局中，让一个 HTML 元素完整覆盖整个浏览器可视高度是一个常见诉求，比如登录页背景、全屏轮播、后台管理框架的左侧菜单等。传统做法依赖百分比高度层层传递，而 CSS 视口单位提供了一种更直接的度量方式，可以从根上规避父级高度缺失导致的覆盖失败。
一、为什么百分比高度经常失效
很多初学者在写全屏容器时会自然地使用 height:100%，但百分比高度有一个前提：其父元素必须具有明确的高度值。如果 body 或 html 没有设置高度，子元素的百分比就会因为找不到参照而回落为 auto，最终元素只包裹自身内容。
例如下面这段结构，外层仅写了 height:100% 却忘了给 html 和 body 也设高，结果容器并不会铺满屏幕：
<!DOCTYPE html>
<html>
<head>
<style>
.box { height: 100%; background: #369; }
/* 忘记设置 html, body 高度 */
</style>
</head>
<body>
<div class="box">内容</div>
</body>
</html>
这种写法在嵌套较深的组件中尤其脆弱，因为任何一层父节点样式遗漏都会让全屏意图落空。此外，移动端浏览器默认的 body 边距也会造成细微的白边，需要进一步重置。
二、视口单位的核心概念
CSS 视口单位以布局视口（viewport）为基准，而不是父元素。其中 vw 表示视口宽度的百分之一，vh 表示视口高度的百分之一。也就是说，100vh 永远等于当前浏览器可视区域的总高度，与 DOM 树结构无关。
除了基础的 vw 和 vh，规范还扩展了 vmin、vmax 以及动态视口单位 dvh、svh、lvh。动态单位会根据浏览器地址栏的显示与隐藏实时变化，更适合移动端。下面用一段样式展示如何用 100vh 直接覆盖全屏：
html, body {
margin: 0;
padding: 0;
}
.full-screen {
height: 100vh;
width: 100%;
background: linear-gradient(135deg, #6a11cb, #2575fc);
}
这段代码的 .full-screen 元素不需要父级设高，就能稳稳占满整屏。相比之下，它比百分比链条更健壮，也更容易在组件库中复用。不过要注意，在部分旧版嵌入式浏览器中，100vh 可能包含被隐藏的工具栏区域，这时可优先使用 dvh 做渐进增强。
三、实际项目中的组合方案
单纯使用 100vh 在移动端可能遭遇地址栏收缩引起的高度跳变。一种稳妥的做法是用 min-height 配合动态单位，既保证桌面端严丝合缝，也照顾小屏体验：
.app-container {
min-height: 100vh;
min-height: 100dvh; /* 新浏览器优先用动态视口 */
display: flex;
flex-direction: column;
}
.header { height: 60px; background: #222; }
.main { flex: 1; overflow: auto; }
上面利用 flex 布局让 .main 自动吸收剩余空间，同时用两层 min-height 兼容不同环境。如果项目还需嵌入 iframe，视口单位依然以顶层窗口为准，不会因为 iframe 内部尺寸而失真，这也是它优于百分比的关键点之一。
在后台系统里，常把左侧导航和右侧内容区都放进一个 100dvh 的容器，这样无论用户怎么滚动，框架本身始终贴边。配合 overflow 控制，可以避免双滚动条问题，整体交互更贴近原生应用。
四、常见误区与排查清单
一个容易被忽略的误区是：把 vh 当成文档高度。实际上它只认可视区域，如果页面本身可滚动，100vh 并不能代表全部内容高度，只代表第一屏。若要做整页水印，应改用 document.documentElement.scrollHeight 结合 JS 或绝对定位。
排查全屏失效时，建议按以下顺序确认：第一，是否重置了 body 的默认 margin；第二，是否混用了 height:100% 与 vh 导致预期冲突；第三，移动端是否用真机调试过地址栏行为。把清单过一遍，大部分覆盖异常都能定位。
| 方案 | 依赖父级 | 移动端表现 | 适用场景 |
|---|---|---|---|
| height:100% | 强依赖 | 一般 | 固定嵌套结构 |
| height:100vh | 不依赖 | 有跳动 | 桌面全屏块 |
| min-height:100dvh | 不依赖 | 较平稳 | 响应式应用壳 |
综上所述，视口单位把高度度量从 DOM 依赖中解放出来。理解 vh 与 dvh 的差异，并在项目中用 min-height 做兼容，就能以低成本解决 HTML 元素全屏覆盖这一经典布局问题。