iOS Safari 在滚动时会动态调整地址栏高度，导致 100vh 计算失准，使页面底部元素（如按钮）被截断；使用 dvh（dynamic viewport height）等新视口单位可精准适配实际可视区域。
ios safari 在滚动时会动态调整地址栏高度，导致 `100vh` 计算失准，使页面底部元素（如按钮）被截断；使用 `dvh`（dynamic viewport height）等新视口单位可精准适配实际可视区域。
在移动端 Web 开发中，一个常见却棘手的问题是：页面在 Chrome、Firefox 或桌面 Safari 上显示正常，但在 iOS Safari（尤其是 iPhone）中，底部内容（例如固定页脚中的按钮）突然“消失”或被截断——即使已设置 min-height: 100vh 或尝试了 -webkit-fill-available 等兼容写法。
根本原因在于：Safari 的 100vh 基于设备的 初始 视口高度（含地址栏），而非用户当前可见区域。当用户向下滚动时，Safari 会隐藏地址栏以腾出更多屏幕空间，此时实际可视高度变大，但 100vh 值并未更新，导致容器高度“不足”，底部内容被裁切。
✅ 推荐解决方案：使用 dvh（Dynamic Viewport Height）
dvh 是 CSS 新增的动态视口单位，其值始终等于当前用户实际可见的视口高度（即地址栏隐藏/显示后的实时高度），完美解决该问题：
html {
/* 移除旧式 hack，避免冲突 */
height: auto;
}
body {
min-height: 100dvh; /* ✅ 关键：替代 100vh */
display: flex;
flex-direction: column;
margin: 0;
}同时，更新你的布局结构，确保主内容区域正确撑开：
<header class="flex items-center justify-between bg-blue-500 px-2 py-4">Header</header>
<main class="flex-grow overflow-auto bg-gray-50">Main Section</main>
<footer class="flex items-center justify-center py-2">
<button type="button" class="flex items-center justify-center rounded bg-blue-500 px-4 py-2 text-white">
Button
</button>
</footer>? 注意：main 使用 flex-grow 配合 body 的 flex-column 布局，能自然填充剩余空间，无需硬编码高度。
? 兼容性处理（渐进增强）
dvh 目前在 Safari 16.4+、Chrome 105+、Firefox 110+ 中已稳定支持（caniuse 数据）。为兼顾旧版 iOS Safari（<16.4），可采用降级策略：
body {
min-height: 100vh; /* 旧浏览器回退 */
min-height: 100dvh; /* ✅ 现代浏览器优先 */
/* 可选：针对 Safari 15.4–16.3 的临时修复（若需支持） */
@supports (height: -webkit-fill-available) {
min-height: -webkit-fill-available;
}
}⚠️ 注意事项与最佳实践
- 避免滥用 position: fixed + bottom: 0：在 Safari 中，固定定位元素可能因视口变化而错位；优先使用 Flex 布局流式控制。
- 慎用 overflow: hidden on html/body：你原始代码中 html { overflow: hidden } 会禁用页面滚动，直接导致底部不可见——请移除。
- 移除冗余 height: -webkit-fill-available：该属性在现代 Safari 中已不必要，且与 dvh 混用可能引发冲突。
- 测试真实设备：iOS 模拟器无法完全复现地址栏动态行为，务必在真机 Safari 中验证滚动过程中的底部渲染。
✅ 总结
用 100dvh 替代 100vh 是目前最简洁、标准、可持续的解决方案。它无需 JavaScript 监听滚动事件，不依赖 UA 判断，语义清晰且性能优异。随着浏览器支持度持续提升（iOS 17 已全面支持），dvh 应成为移动端全屏布局的默认选择。
