min-height: 100vh 不生效的根本原因是父元素（如 html、body）未显式设置高度，导致视口单位计算异常；需设 html, body { height: 100% }，或改用 100dvh 兼容动态视口。
min-height: 100vh 为什么有时不生效
根本原因不是写错了，而是父元素没撑开——vh 是相对视口高度的单位，但若祖先元素（比如 html 或 body）高度为 auto，某些浏览器会按内容高度计算，导致子元素的 100vh 实际取值异常小。
- 必须确保
html和body都显式设为height: 100%或min-height: 100% - 部分旧版 Safari 对
vh在地址栏展开/收起时响应不及时，页面可能短暂“塌陷” - 如果页面有固定头部或底部，直接用
min-height: 100vh会导致内容区被遮挡，应改用calc(100vh - 60px)等动态计算
body 上直接写 min-height: 100vh 安全吗
不安全。多数情况下会失效，因为 body 默认是 display: block，但它的高度由内容决定，没有继承 html 的高度；而 html 元素本身默认也没有高度约束。
- 正确写法是：
html, body { margin: 0; height: 100%; }<br>body { min-height: 100vh; } - 若项目用了 CSS Reset 或 Normalize，检查是否重置了
html的height，有些版本会设成100%，有些则不会 - 使用 Flex 布局时，可跳过
height: 100%，直接对body设display: flex; min-height: 100vh，更鲁棒
100vh 在移动端 Safari 中滚动时跳变
这是 iOS Safari 的经典 bug：地址栏隐藏/显示会触发视口高度重算，但页面未重绘，导致 100vh 值滞后，表现为底部留白或内容被截断。
- 临时缓解：监听
resize事件，强制触发布局（如给根元素加个无意义的transform） - 更稳方案：不用
vh，改用min-height: 100dvh（dvh= dynamic viewport height），Chrome 105+、Safari 16.4+ 支持 - 兼容性兜底：
@supports not (min-height: 100dvh) {<br> section { min-height: 100vh; }<br>}<br>@supports (min-height: 100dvh) {<br> section { min-height: 100dvh; }<br>}
用 flex + min-height: 100vh 实现「内容不满一屏时页脚沉底」
这是最常见也最容易翻车的场景：页脚总浮在半空，或把内容撑得过高。关键不在 min-height，而在容器的 flex 行为是否被正确触发。
立即学习“前端免费学习笔记（深入）”；
- 结构需满足：
body是 flex 容器，子元素包含main（主内容）和footer（页脚） - 必须给
main加flex: 1，否则它不会自动撑满剩余空间 - 错误写法：
main { min-height: 100vh; }—— 这会让main至少占满一屏，页脚必然被顶出视口 - 正确组合：
body { display: flex; flex-direction: column; min-height: 100vh; }<br>main { flex: 1; }<br>footer { /* 不设高度，自然贴底 */ }
实际项目里最常被忽略的是 html 和 body 的初始高度状态，以及 dvh 这种新单位的渐进支持节奏——别只测 Chrome，iOS 真机连横屏切竖屏都可能暴露问题。
