最轻量解法是用@supports包裹min-height:100dvh并外置min-height:100vh兜底；绝对定位元素需父容器设min-height或改用top/bottom；ios15/微信x5必须js动态设--vh并监听scroll/weixinjsbridgeready，用requestanimationframe防抖。
直接用 min-height: 100dvh 替代 100vh 是最轻量、最有效的解法，但必须搭配 @supports 降级，否则 iOS 15、微信 X5 内核等环境会完全塌陷。
为什么 100dvh 必须用 @supports 包裹整条规则
旧版 Safari（iOS 15.x 及更早）、微信安卓 X5 内核、部分 WebView 根本不识别 100dvh，遇到不认识的单位会直接跳过整条声明——但如果你写成：
.page { min-height: 100vh; min-height: 100dvh; }
老环境忽略第二行，新环境仍沿用第一行，问题照旧。正确做法是：
-
@supports必须包裹整个选择器和声明块，不能只包值 - 兜底的
min-height: 100vh必须写在@supports外层，确保所有浏览器至少有基础高度 - 别用
height，坚持用min-height：内容超长时不会被强制裁剪
position: absolute 元素设了 100dvh 为啥没反应
百分比高度（包括 100dvh）依赖包含块（containing block）的高度，不是“强制占满屏幕”。常见于遮罩层、弹窗、底部按钮。
- 父容器（如
body或直接祖先）没设min-height: 100dvh→ 子元素计算出的高度为0 - 对绝对定位元素，优先用
top: 0; bottom: 0;，比height: 100dvh更可靠 - 若父容器本身也靠
--vh驱动，需确保它先完成初始化，否则子元素读到的是初始1px
微信和 iOS 15 怎么兜底：JS 动态设 --vh 是唯一解
这些环境完全不认 dvh 或 svh，CSS 方案彻底失效。必须用 JS 动态读取 window.innerHeight 并注入 CSS 变量：
- 必须在
DOMContentLoaded后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值 - 监听目标不是只有
resize：iOS 地址栏收起只触发scroll，微信还要监听weixinjsbridgeReady - 防抖必须用
requestAnimationFrame，setTimeout在微信安卓下极易卡死 - CSS 中统一写
min-height: calc(var(--vh, 1px) * 100)，不依赖父级是否设了height: 100%
真正容易被忽略的是：即使用了 100dvh，也要检查父容器是否参与高度继承链；而一旦引入 JS 方案，requestAnimationFrame 防抖和首次同步执行这两个点，漏掉任何一个都会导致首屏白屏或滚动跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
