应使用@supports (min-height: 100dvh)包裹整条min-height: 100dvh规则，因ios 15及更早版本不支持dvh会忽略该声明导致页面塌陷；100vh在safari中因地址栏高度计算偏差引发滚动条、内容裁切等问题，需用min-height而非height并配合兜底和js动态--vh变量确保兼容性。
直接用 min-height: 100dvh 替代 height: 100vh，但必须配 @supports 包裹整条规则，否则 iOS 15 及更早版本会完全忽略，页面直接塌陷。
为什么 100vh 在 Safari 里会跳动
不是你写错了 CSS，是 Safari 把 100vh 锁死在页面加载瞬间的「布局视口」高度上——比如 iPhone 14 加载时地址栏还开着，1vh 就被算成 8.44px（844px ÷ 100），之后哪怕地址栏收起、键盘弹出、横竖屏切换，这个换算关系也不更新。结果就是容器高度卡死，内容被截、fixed 元素飘浮、底部留白。
怎么安全地换成 100dvh
100dvh 是标准解法，代表“当前实际可视区域高度”，iOS Safari 16.4+、Chrome 109+、Firefox 117+ 已稳定支持，但它不能裸用：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须用
@supports (min-height: 100dvh)包裹整个规则块，不能只包值；否则新 Safari 仍走100vh路径 - 优先用
min-height，不用height：避免内容超长时被强制裁剪，用户滑不到底部 - 前置声明
min-height: 100vh作为降级，确保老环境至少有基础高度 - 别混写
height: 100vh, 100dvh—— CSS 不支持逗号分隔单位
.page {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.page {
min-height: 100dvh;
}
}
绝对定位元素用了 100dvh 还是不占满？
因为 100dvh 不是“强制撑满窗口”，它依赖包含块（containing block）的高度。如果父容器没设高度（比如只是 position: relative 且没 min-height），那 min-height: 100dvh 就无效：
- 确保父级（如
或直接祖先）也有min-height: 100dvh或显式高度 - 对
position: absolute元素，更稳的写法是top: 0; bottom: 0;，绕过高度继承链 - 别信
-webkit-fill-available：它只对height生效，min-height不认；软键盘弹起时不响应；iPad Chrome 中甚至叠加翻倍
兜底方案：JS 动态同步 --vh 变量
当目标环境含大量 iOS 15.x 用户（如企业内网 WebView 或老机型存量高），纯 CSS 方案不可靠，必须 JS 回退：
- 监听
resize和orientationchange，iOS 地址栏显隐会触发 - 初始设置必须在 DOM ready 后立即执行，否则首屏渲染仍用错误
vh - CSS 中统一用
min-height: calc(var(--vh, 1px) * 100)，其中1px是兜底，避免 SSR 渲染时闪动 -
getComputedStyle(el).height返回的是字符串"100dvh"，不是像素值，没法直接用于动画或计算
真正容易被忽略的点是：所有方案都依赖 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 这个开关——漏掉它，dvh、env(keyboard-inset-bottom)、visualViewport 全部失效；但它又可能在某些安卓定制 WebView 里引发渲染异常，得实机逐个测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
