100dvh是解决移动端100vh被地址栏遮挡的语义正确方案，需用@supports(min-height: 100dvh)包裹并兜底min-height: 100vh，iOS 15及微信WebView等不支持环境必须用JS监听resize动态设置--vh变量。
100vh 在移动端被地址栏“遮挡”，不是 CSS 写错了，是它压根没按你眼睛看到的区域算高度——浏览器拿的是设备物理屏高（比如 iPhone 14 的 844px）来定义 1vh，而地址栏、底部导航栏这些可隐藏 UI 元素，全被算进去了。
为什么 100vh 计算值比可视区高
iOS Safari 和微信 WebView 加载页面瞬间，会用设备完整屏幕高度计算 100vh，但此时地址栏还挂着，真实可视高度可能只有 ~700px。结果就是容器撑得比你能看见的还高，内容被截、底部留白；滚动后地址栏收起，可视区变大了，但 100vh 值锁死不动，视觉上内容突然上移或错位。
- Android Chrome 同样存在，尤其在 PWA 或全屏模式下更明显
- height: 100vh 比 min-height: 100vh 更危险：前者硬裁剪，用户滑不到底部
- 键盘弹出、横竖屏切换也会触发同样问题，但 100vh 完全不响应
@supports(min-height: 100dvh) 必须包整条规则
只写 .page { min-height: 100vh; min-height: 100dvh; } 是无效的。iOS 15.x 及更早版本不认识 100dvh，直接忽略第二行；新 Safari 也可能因解析顺序或构建工具干扰继续走旧值。
- 正确写法：
.page { min-height: 100vh; }+@supports (min-height: 100dvh) { .page { min-height: 100dvh; } } - 兜底声明必须在外层，确保老环境至少有基础高度
- PostCSS 插件若自动把
100dvh降级成100vh，必须关掉该功能
position: absolute 元素设了 100dvh 为啥没反应
绝对定位元素的百分比高度（包括 100dvh）依赖包含块（containing block）的高度，不是“强制占满屏幕”。常见于弹窗、遮罩层、底部按钮等场景。
- 父容器（如
body或某个 wrapper）没设min-height: 100dvh或显式高度 → 子元素100dvh实际计算为 0 - 别对绝对定位元素用
height: 100dvh，改用top: 0; bottom: 0;，更稳定且不依赖父容器高度 - 若父容器本身靠
--vh驱动，JS 初始化必须先于子元素渲染，否则读到的是初始 1px
iOS 15 和微信 WebView 必须用 JS 动态设 --vh
这些环境根本不识别 dvh 或 svh，纯 CSS 方案会塌成一条线。JS 是唯一可靠路径，但监听目标和执行时机极容易出错。
- 必须在
DOMContentLoaded后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值 - 监听
resize（地址栏收放、键盘弹出、横竖屏都会触发），不用监听scroll（高频且无必要） - 防抖必须用
requestAnimationFrame，setTimeout在微信安卓下极易卡死 - CSS 中统一写
min-height: calc(var(--vh, 1px) * 100)，其中1px是兜底，避免 JS 未执行时完全无高度
真正容易被忽略的是：即使用了 100dvh，也要检查父容器是否参与高度继承链；而一旦引入 JS 方案，requestAnimationFrame 防抖和首次同步执行这两个点，漏掉任何一个都会导致首屏白屏或滚动跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
