100dvh是当前最简有效的解法，它表示当前可见视口高度，实时响应地址栏收放、软键盘开关和横竖屏切换；ios 16.4+、android chrome 109+已支持，需用@supports安全降级。
min-height: 100vh 在 iOS Safari 下“过长”，不是写错了，是它把地址栏高度算进去了，而地址栏收起后视口变高，CSS 却不重算 —— 所以实际高度 > 可见区域，导致底部滚动条或内容被顶出可视区。
为什么 min-height: 100% 不是可靠替代方案
很多人想用 min-height: 100% 绕开 100vh 的问题，但这条路在移动端基本走不通：
-
height: 100%（含min-height）必须依赖父元素有明确高度；html和body默认没有显式高度，整条链就断了 - 即使给
html、body都加了height: 100%，iOS Safari 仍会因 layout viewport 计算逻辑，让最终高度不稳定 - 软键盘弹出时，
100%不响应视觉视口变化，和100vh一样“卡死”在初始值 - 真机测试中常见：页面首次加载正常，一滚动或切横屏，
100%容器突然塌陷或撑爆
100dvh 是当前最简有效的解法
100dvh（dynamic viewport height）是 W3C 标准，表示“当前可见视口高度”，iOS 16.4+、Android Chrome 109+ 均已支持，它实时响应地址栏收放、软键盘开关、横竖屏切换。
- 直接替换：
min-height: 100vh→min-height: 100dvh，无需 JS - 用
@supports安全降级，老版本自动 fallback 到100vh：
body {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
body {
min-height: 100dvh;
}
}
- 注意：Firefox 目前不支持
dvh，部分 Android WebView 表现不稳定，所以@supports不是可选项，是必选项
需要兼容 iOS 15 及更早版本？用 --vh + visualViewport
当目标用户包含大量 iOS 15–16.3 设备时，必须用 JS 动态注入 --vh 变量，并监听 visualViewport：
- 优先用
window.visualViewport?.height，比window.innerHeight更准（后者在软键盘唤起时可能未更新） - 必须监听
visualViewport.resize，不能只靠resize事件 —— 地址栏收放、键盘开关都触发它，但不触发window.resize - CSS 中写法要分层回退，顺序不能错：
.container {
min-height: 100dvh;
min-height: calc(100 * var(--vh, 1px));
min-height: 100vh;
}
- 别漏掉防抖：iOS 连续触发
visualViewport.resize，直接设 CSS 变量会导致重排抖动；用requestAnimationFrame包一层最稳妥 - 服务端渲染（SSR）页面首次加载时，JS 未执行，
--vh为默认值，需配合内联<style></style>或骨架屏避免白屏
容易被忽略的布局干扰点
就算用了 100dvh 或 --vh，iOS 上仍可能高度异常，问题常藏在这些地方：
- 父容器用了
position: fixed或position: absolute→ 脱离文档流，min-height失效 - 容器本身有
padding或border，但没设box-sizing: border-box→ 实际高度 =100dvh + padding + border，必然溢出 - 背景图或视频用了
background-size: cover，但没加background-repeat: no-repeat→ 图片重复平铺造成视觉误判，以为高度不够 - Flex 布局中，父容器设了
min-height: 100dvh，但子项用了height: 100%→ 子项又回到百分比陷阱，应统一用flex: 1或min-height: 0防止 flex item 撑开
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
