<p>最可靠解法是用 @supports 包裹整条 100dvh 规则，外层保留 min-height: 100vh 作降级；绝对定位元素需父容器设高度或改用 top/bottom；iOS 15- 需 JS 动态设 --vh 并防抖更新。</p>
直接用 min-height: 100dvh 并配 @supports 降级，是当前最轻量、最可靠的解法；但裸写或写错包裹方式，反而会让新旧 Safari 都失效。
为什么 100dvh 必须用 @supports 包裹整条规则
iOS Safari 16.4+ 和 Chrome 105+ 才原生支持 100dvh，旧版（尤其是 iOS 15.x 及微信 WebView）会直接忽略该声明。如果只写：
.page {
min-height: 100vh;
min-height: 100dvh; /* 错误：老 Safari 忽略这行，新 Safari 仍用上一行 */
}结果是所有 Safari 都走 100vh，问题照旧。正确做法是：
-
@supports必须包裹整个 CSS 规则块，不能只包值 - 兜底声明（
min-height: 100vh）必须写在@supports外面，确保老环境至少有基础高度 - 优先用
min-height而非height，避免内容超长时被截断
标准写法：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.page {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
.page {
min-height: 100dvh;
}
}
position: absolute 元素套 100dvh 为啥没反应
绝对定位元素的百分比高度（包括 100dvh）依赖包含块（containing block）的高度，不是“强制占满屏幕”。常见于弹窗、遮罩层、底部固定按钮。
- 父容器（如
body或直接祖先）没设min-height: 100dvh或显式高度 → 子元素100dvh实际计算为0 - 别对绝对定位元素用
height: 100dvh，改用top: 0; bottom: 0;更可靠 - 若父容器本身也靠
--vh驱动，需确保它先完成初始化，否则子元素读到的是初始1px
兼容 iOS 15 及以下必须用 JS 动态设 --vh
当用户存量含大量 iOS 15.x 或旧版 WebView 时，100dvh 会完全失效，页面塌成一条线。此时需 JS 回退：
- 必须在
DOMContentLoaded后立即执行一次，否则首屏渲染用的是地址栏未收起时的错误初始值 - 监听
resize即可 —— 地址栏收起、键盘弹起、横竖屏切换都会触发它；orientationchange在部分 iOS 版本中不可靠 - 防抖必须用
requestAnimationFrame，iOS 连续触发resize，直接更新样式会导致重排抖动 -
--vh必须设为px单位：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)；CSS 中写height: calc(100 * var(--vh, 1px))，兜底值不能是1vh
-webkit-fill-available 看似简单，但容易踩坑
这是 Safari 专属的“填满可用空间”值，PostCSS 插件靠它实现无 JS 修复，但限制多：
- 只对
height有效，min-height不认它 - 必须配合
@supports (-webkit-touch-callout: none)检测 Safari，否则 Chrome 等会误用，导致布局异常 - 不响应软键盘弹起：键盘顶起页面时，它不会收缩，可能遮挡输入框
- iPad 版 Chrome 中甚至会叠加计算，造成高度翻倍、滚动条意外出现
真正麻烦的不是单位选错，而是混合使用 dvh 和 svh，或在 position: fixed 元素上直接套 100dvh 却没设包含块高度——这些地方一错，元素就飘走，而且很难定位。
