最简有效解法是用min-height: 100dvh替代100vh并以@supports包裹整条规则，因safari将100vh锚定在含地址栏的初始视口且不重算，导致滚动后撑不满或撑过头；需兜底min-height: 100vh，且100dvh不支持ios 15及旧版，须配合js动态--vh变量兼容。
直接用 min-height: 100dvh 替代 min-height: 100vh，并用 @supports 包裹整条规则——这是当前最简且有效的解法。不是你写错了，是 Safari 对 100vh 的计算锚定在初始 layout viewport（含地址栏），滚动后地址栏收起，视口变高，但 CSS 不重算，导致容器“撑不满”或“撑过头”。
为什么 min-height: 100% 在 Safari 中算成 0
它依赖整条祖先链有明确高度：必须同时给 html、body 和所有中间容器设 height: 100%。但即使全写了，Safari 仍受 layout viewport 计算缺陷影响；软键盘弹出时，100% 完全不响应视觉视口变化。真机常见现象：首次加载正常，一滚动或横屏，容器突然塌陷或溢出。
- 验证方法：临时加
border: 1px solid red到父容器，看是否“塌陷” - 检查 DevTools 的 Computed 面板里父容器的
height值——如果是auto，子项的min-height: 100%基本不会触发 - 别指望
min-height: 100%在 Flex 子项中可靠工作：Safari 对包含块高度判定更严格，只设min-height: 100vh而无height，子项就失去参照
min-height: 100dvh 必须搭配 @supports 使用
100dvh 表示“当前可见视口高度”，iOS 16.4+、Chrome 109+ 已支持，能实时响应地址栏显隐、软键盘开关、横竖屏切换。但它不是万能钥匙：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
@supports必须包裹整条规则，不能只包声明值（例如错写成min-height: 100vh; min-height: 100dvh;） - Firefox 目前不支持
dvh，部分 Android WebView 表现不稳定，降级不是可选项，是必选项 - 若元素是
position: absolute且父容器没设高度，100dvh会失效——它依赖包含块，不等于“强制占满屏幕”
正确写法：
body { min-height: 100vh; }
@supports (min-height: 100dvh) {
body { min-height: 100dvh; }
}
兼容 iOS 15 及更早版本：用 --vh 变量 + resize 监听
当用户群覆盖大量 iOS 15.x 设备时，仅靠 @supports 会 fallback 到 100vh，而老 Safari 会把 100dvh 当作无效值，最终退化为 auto，页面直接塌掉。
- 必须在
DOMContentLoaded后立即执行一次 JS，否则首屏渲染用的是错误初始值 - 监听
resize就够了，orientationchange在部分 iOS 版本中不可靠；地址栏收放、键盘弹起都会触发resize - 要用
requestAnimationFrame防抖，iOS 连续触发resize，不节流会导致频繁重排 - CSS 中写
min-height: calc(var(--vh, 1vh) * 100)，其中1vh是兜底，避免 JS 未加载时元素缩成一条线 - 别忘了给
html和body设margin: 0和height: 100%，否则window.innerHeight可能被外边距干扰
真正容易被忽略的是：绝对定位元素配合 vh 类单位，本质上是无效组合；还有，100dvh 在 Safari 里对 flex 子项的生效，依然依赖父容器是否参与高度继承链——一旦引入 JS 方案，requestAnimationFrame 防抖和首次同步执行这两个点，漏掉任何一个都会导致首屏白屏或滚动跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
