100dvh是唯一语义正确的解法，因其直接映射visualviewport.height，实时响应地址栏、键盘及横竖屏变化；必须用min-height配合@supports降级，否则ios 15、微信webview等不支持环境会塌陷。
直接用 100dvh 替代 100vh，但必须搭配 min-height 和 @supports 降级，否则 iOS 15、微信 WebView 等环境会塌陷成一条线。
为什么 100dvh 是唯一语义正确的解法
100dvh 表示“此刻用户真正看到的视口高度”，浏览器原生响应地址栏收起/展开、软键盘弹出、横竖屏切换——它不是估算，是实时读取 visualViewport.height 的 CSS 映射。而 100vh 基于初始布局视口（含工具栏），冻结不更新；-webkit-fill-available 在 height 上行为不稳定，Chrome 完全不识别，且不响应键盘弹起。
-
100dvh已在 Safari 16.4+、Chrome 109+、Firefox 117+ 稳定支持，覆盖 2023 年后绝大多数活跃设备 - 不能用于
@media查询（如@media (min-height: 100dvh)是非法语法） - 必须用
min-height，不是height：避免内容超长时被裁剪，用户仍可滚动到底部
@supports 必须包裹整条规则，不能只包值
错误写法：min-height: 100vh; min-height: 100dvh; —— Safari 会忽略第二条，仍用 100vh；更糟的是，iOS 15 及旧版 WebView 根本不识别 100dvh，若没兜底，整个选择器声明会被跳过，元素高度退化为 auto，视觉上直接塌陷。
- 正确结构：外层先写
min-height: 100vh，再用@supports (min-height: 100dvh)包裹完整的选择器和声明块 - 别写成
height: 100vh; height: 100dvh;：Safari 16.4+ 虽能取后者，但 Firefox 不支持100dvh作height，且老环境无 fallback - PostCSS 插件若自动把
dvh降级为vh，必须关掉——否则白忙一场
绝对定位或 flex 子项里 100dvh 失效怎么办
100dvh 是相对视口的单位，但它仍受包含块约束。如果父容器没设明确高度（比如只是 position: relative 且未设 min-height），或 flex 容器未触发 stretch 行为，100dvh 就无法生效。
- 对
position: absolute元素，优先用top: 0; bottom: 0;替代min-height: 100dvh，更可靠 - flex 子项需确保父容器有
min-height: 100dvh或显式高度，且子项没设flex-shrink: 0卡死高度 - 避免在
display: contents或某些grid场景中依赖100dvh：这些容器不产生包含块，dvh值可能卡住不动
别漏掉 box-sizing: border-box 和 viewport meta
100dvh 解决了高度值问题，但 padding/border 仍会叠加在设定高度之外，导致实际内容溢出、意外滚动条。同时，meta 缺失会让 iOS Safari 拒绝正确解析视口单位。
- 全局加
* { box-sizing: border-box; }，让padding和border包含在min-height: 100dvh内 -
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">必须存在，否则部分 iOS 版本会强制缩放，破坏高度计算 - 不要给
html或body直接设height: 100vh：容易触发 iOS 的滚动异常和缩放抖动
最易被忽略的一点：即使写了 @supports (min-height: 100dvh)，如果构建工具或 CDN 自动做了 CSS 压缩/重写，把括号里的空格删了（如变成 @supports(min-height:100dvh)），部分旧版 Safari 会直接忽略该规则——务必检查最终上线的 CSS 字符串是否合规。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
