100vh在ios safari中不准确是因为其按设备物理屏高计算，未随地址栏收起动态调整，导致内容裁切或留白；应使用@supports(min-height: 100dvh)包裹整条规则并以min-height: 100vh兜底，确保兼容性与响应性。
直接用 min-height: 100dvh 替代 100vh，但必须用 @supports (min-height: 100dvh) 包裹整条规则，否则 iOS 15 及更早系统会忽略该声明，元素高度回退为 auto，页面视觉上“塌陷”或留白。
为什么 100vh 在 iOS Safari 里会多出滚动条
它不是你 CSS 写错了，是 Safari 把地址栏高度算进初始视口了：页面刚加载时地址栏挂着，window.innerHeight 可能是 762px，但 1vh 却按设备物理屏高（比如 iPhone 13 是 812px）算成 8.12px，于是 100vh 实际是 812px——比你能看见的区域高约 50px。滚动后地址栏收起，视口变大，但 100vh 不重算，内容就被切掉、底部留白，甚至触发意外滚动条。
- 典型现象包括：
overflow: hidden失效、position: fixed元素错位、全屏轮播图顶部被遮挡 -
height: 100%无效，除非html和body都显式设了height: 100%（它们默认是auto） - Android Chrome 同样存在，尤其在 PWA 或全屏模式下更明显
@supports 必须包裹整条规则，不能只包值
错误写法是只包声明值，比如：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.page {
min-height: 100vh;
min-height: 100dvh;
}
这样新 Safari 仍用 100vh，根本没触发 dvh；也别裸写 height: 100dvh，它会强制裁剪内容，用户滑不到底部。
- 前置
min-height: 100vh作为兜底，确保老环境至少有基础高度 -
@supports (min-height: 100dvh)必须包裹整个选择器和声明块 - 优先用
min-height而非height：内容超长时不会被截断
绝对定位元素 + 100dvh 容易失效的坑
如果你给一个 position: absolute 元素写了 min-height: 100dvh，但它的父容器没设明确高度（比如只是 position: relative 且无 height），那它依然不会占满屏幕——dvh 依赖包含块，不是“强制撑满窗口”。
- 确保父容器（如
body或直接祖先）有min-height: 100dvh或显式高度 - 对绝对定位元素，更稳妥的是用
top: 0; bottom: 0;替代height: 100dvh - 别信
-webkit-fill-available能一劳永逸：它只对height有效，min-height不认；不响应软键盘弹起；iPad Chrome 中甚至会叠加导致高度翻倍
真正麻烦的不是写错单位，而是混合使用 dvh 和 svh，或者在 position: fixed 元素上直接套 100dvh 却没设包含块高度——这些地方一错，fixed 元素就飘走，而且很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
