ios safari 中 min-height: 100vh 不生效是因视口计算包含地址栏，导致实际高度小于可见区域；推荐优先使用 min-height: 100dvh（ios 16.4+ 支持），并用 @supports 降级至 100vh；兼容老版本需 js 动态设置 --vh 变量并监听 resize 和 orientationchange。
min-height: 100vh 在 iOS Safari 下不生效？
不是 CSS 写错了，是 iOS Safari 对 100vh 的计算逻辑特殊：它把地址栏、工具栏高度也算进视口，导致 100vh 实际小于用户可见区域，min-height 自然“撑不满”。
- 只在 iOS Safari（含微信内置浏览器）常见，Android Chrome 和桌面端基本正常
- 页面滚动时地址栏收起/展开，
100vh值会动态变化，但 CSS 不重算，造成视觉错位 - 用
height: 100vh更糟——可能直接截断内容；min-height至少能保底，但依然不可靠
用 100dvh 替代 100vh 是最简方案
100dvh（dynamic viewport height）是 CSS 新标准，表示“当前可见视口高度”，iOS 16.4+ 和 Android Chrome 109+ 已支持，它实时响应地址栏显隐。
- 直接把
min-height: 100vh换成min-height: 100dvh，无需 JS 干预 - 兼容性需兜底：老版本 iOS 仍 fallback 到
100vh，可用@supports优雅降级 - 示例：
body { min-height: 100vh; }@supports (min-height: 100dvh) { body { min-height: 100dvh; } }
需要兼容 iOS 15 及更早版本？用 JS 动态设置 --vh 变量
核心思路：JS 读取 window.innerHeight，写入 CSS 自定义属性，CSS 中用 min-height: calc(var(--vh, 1vh) * 100)。
- 必须在
resize和orientationchange事件中更新，否则横竖屏切换或地址栏收放后失效 - 首次渲染前就要执行一次，避免白屏或闪动；建议放在
内联 script 或 DOMContentLoaded 后立即运行 - 注意防抖：iOS 连续触发 resize，不节流会导致频繁重排；用
requestAnimationFrame最稳妥 - 示例关键代码：
function setVh() { document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); }setVh();window.addEventListener('resize', setVh);，对应 CSS：min-height: calc(var(--vh, 1px) * 100)
为什么不用 height: 100% 或 flex: 1？
这两个方案依赖父容器高度，而移动端 HTML/body 默认无显式高度，100% 会退化为 auto，根本不起作用。
-
height: 100%要求所有祖先（html,body, 父容器）都设height: 100%，但 iOS 上仍受100vh计算缺陷影响 -
flex: 1需要父容器是display: flex且有明确高度，同样绕不开视口高度不准的问题 - 它们不是替代方案，而是补充手段：在
min-height正确设置的前提下，再用flex布局做内部对齐更可靠
实际项目里，100dvh 能覆盖绝大多数新设备；老 iOS 用户占比低时，用 @supports 降级就足够。真要全兼容，JS 方案得小心处理 resize 频次和初始时机——稍一疏忽，滚动时就会看到底部露白或内容被裁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
