直接用min-height: 100dvh替代100vh必须配合@supports降级，因ios 16.4+和chrome 109+才支持，旧版safari及微信x5内核不识别该单位，需min-height: 100vh兜底，且@supports须包裹整条规则而非仅值。
直接用 min-height: 100dvh 替代 100vh，但必须配合 @supports 降级，且不能单独使用——它不自动撑开子元素，也不解决绝对定位或老环境兼容问题。
为什么 100dvh 不能直接替换 100vh 就完事
很多人以为改个单位就一劳永逸，结果在 iOS 15 或微信 X5 内核里页面直接塌成一条线。原因很实在：
-
100dvh是 CSS 新标准，iOS 16.4+、Chrome 109+ 才稳定支持；旧版 Safari 和多数 WebView 完全不认识这个单位，遇到就跳过整条声明 - 只写
min-height: 100dvh没兜底，老环境无任何高度设置 → 容器高度为auto→ flex 子项没空间可分，flex-1失效 -
100dvh是“动态值”，但它本身不触发布局重排，父容器若没设display: flex或高度上下文，子元素照样算不出有效高度
@supports 必须包裹整块规则，不能只包值
错误写法：.page { min-height: 100vh; min-height: 100dvh; } —— 老浏览器忽略第二行，新浏览器仍走第一行，问题照旧。
正确结构是：
.page {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.page {
min-height: 100dvh;
}
}
- 兜底的
min-height: 100vh必须写在@supports外面，确保所有环境至少有基础高度 -
@supports检测的是属性+值整体是否被支持，不是只看单位；漏掉括号或写错语法（如@supports (100dvh)）会导致整个块被忽略 - 构建工具（如 PostCSS 插件）若自动把
dvh降级为vh，必须关掉该功能，否则白忙一场
绝对定位元素设了 100dvh 还是没反应
常见于遮罩层、弹窗、底部固定按钮。这不是 dvh 不行，而是它依赖包含块（containing block）的高度。
- 如果父容器（比如
body或直接祖先）没设min-height: 100dvh，那子元素的height: 100dvh实际计算为0px - 对
position: absolute元素，优先用top: 0; bottom: 0;替代height: 100dvh，更可靠，不依赖父高 - 若父容器本身靠 JS 注入的
--vh变量驱动，需确保变量先初始化，否则子元素读到的是初始1px
Tailwind 用户注意：别混用 h-screen 和 min-h-[100dvh]
Tailwind ≥ 3.3 支持 min-h-[100dvh]，但容易踩坑：
-
h-screen编译为height: 100vh，min-h-screen是min-height: 100vh，两者都不可靠；直接换掉，别留着当后备 -
min-h-[100dvh]只设最小高度，不会让子元素自动弹性分配空间——必须搭配flex flex-col布局，主内容加flex-1 - 别给
html或body加h-full或min-h-full，这会干扰dvh行为，尤其在 iOS 上引发滚动条异常 - meta viewport 中写了
height=device-height？删掉。这个参数会让所有vh类单位失效
真正麻烦的从来不是换单位，而是所有依赖高度的环节都要同步检查：flex 是否被拉伸、overflow 是否触发 BFC、fixed 元素是否彻底脱离文档流、JS 注入的 --vh 是否首次同步执行——漏掉任意一环，100dvh 就救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
