100vw/100vh仅占满视口，受滚动条、iOS地址栏动态变化、缩放及父容器限制影响易出现溢出或留白；推荐用min-height: 100vh; min-height: 100dvh;兼容处理，必要时辅以JS动态设置height。
用 width: 100vw; height: 100vh; 确实能让元素视觉上“铺满整个屏幕”，但要注意它只是占满视口（viewport），不是真正意义上的“铺满屏”——比如滚动条、缩放、移动端 Safari 地址栏隐藏/显示、iframe 嵌套等场景下，实际表现可能和预期不一致。更稳妥的方案是结合语义、响应式逻辑与少量 JS 辅助。
为什么 100vw/100vh 有时“没铺满”或“溢出”？
常见原因：
- 滚动条占用空间：100vw 包含垂直滚动条宽度（如 17px），导致内容实际超出视口，触发横向滚动；
-
移动端地址栏动态变化：Safari/Chrome 在 iOS 上滑动时地址栏收起，
100vh不会自动重算，造成底部留白或遮挡； - 缩放或字体放大：用户缩放页面后，vw/vh 单位按初始视口计算，布局可能错位；
-
父容器限制：如果父元素有
overflow: hidden或transform，可能裁剪子元素，即使它写了 100vh。
更可靠的全屏方案（纯 CSS）
优先使用以下组合，兼容性好且无需 JS：
-
根元素设为视口尺寸：
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
再让目标元素height: 100%;继承即可； -
用
min-height: 100vh替代height：
避免内容少时撑不满、内容多时被截断；加min-height: 100dvh;（推荐）可适配移动端动态视口； -
现代推荐：使用
dvh单位（dynamic viewport height）：
height: 100dvh; —— 浏览器会实时响应地址栏显隐，iOS Safari 16.4+、Chrome 105+ 支持；
需要精确铺满？用 JS 补充计算（轻量级）
当必须严格贴合物理屏幕（如全屏背景图、游戏画布、WebGL 容器），可监听 resize 并更新高度：
立即学习“前端免费学习笔记（深入）”；
- 获取真实可用高度：
const realHeight = window.innerHeight; - 绑定到元素 style：
element.style.height = realHeight + 'px'; - 加上防抖和 resize 监听，避免频繁触发；
- 注意：仅在必要时使用，多数布局用
100dvh+min-height已足够。
实际写法示例（推荐组合）
一个兼顾兼容性与现代特性的全屏容器：
.fullscreen {margin: 0;
min-height: 100vh;
min-height: 100dvh;
width: 100vw;
box-sizing: border-box;
}
这样既 fallback 到传统 vh，又在支持的浏览器中启用动态视口，同时用 min-height 防止内容不足时塌陷。
