最简可靠解法是用 min-height: 100dvh 替代 100vh 并用 @supports 降级；100dvh 表示当前可见视口高度，实时响应地址栏、软键盘、横竖屏变化，但需整条规则包裹 @supports，且 firefox 不支持、老 ios 需 --vh 变量+resize 监听。
直接用 min-height: 100dvh 替代 min-height: 100vh，并用 @supports 降级，是当前最简且可靠的解法。iOS Safari 对 100vh 的计算锚定在初始 layout viewport（含地址栏），滚动后地址栏收起，视口变高，但 CSS 不重算，导致高度“撑过头”或“撑不满”——这不是你写错了，是 Safari 的渲染逻辑使然。
为什么 min-height: 100% 在移动端基本无效
它依赖整条祖先链有明确高度：必须同时给 html、body 和所有中间容器设 height: 100%。但即使全写了，iOS Safari 仍受 layout viewport 计算缺陷影响；软键盘弹出时，100% 完全不响应视觉视口变化，和 100vh 一样“卡死”在初始值。真机常见现象：首次加载正常，一滚动或横屏，容器突然塌陷或溢出。
min-height: 100dvh 必须搭配 @supports 使用
100dvh 表示“当前可见视口高度”，iOS 16.4+、Android Chrome 109+ 已支持，能实时响应地址栏显隐、软键盘开关、横竖屏切换。但它不是万能钥匙：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
@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 子项的生效，依然要配合 min-height: 0 才能避免高度冻结。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
