min-height: 100vh 经常不生效，是因为父容器（如 html、body）默认无显式高度，导致子元素参照的包含块高度为0；必须同时设置 html, body { height: 100%; margin: 0; }，并在 Flex 布局中配合 flex: 1 和 min-height: 0 才能可靠撑满且自适应内容。
min-height: 100vh 为什么经常不生效
直接写 min-height: 100vh 却没撑满，八成是因为父容器高度为 0。CSS 的 min-height 是相对于**包含块（containing block）** 计算的，而默认情况下 html 和 body 没有显式高度，导致子元素的 100vh 实际参照的是“无高度”的父级，最终退化为内容高度。
常见错误现象：min-height: 100vh 写在 .container 上，但页面顶部留白、底部悬空，滚动条仍出现。
- 必须给
html和body同时设height: 100%或min-height: 100% -
body默认有margin，会撑开额外空间，需重置：body { margin: 0; } - 若用 Flex 布局做整体结构，
html和body的height: 100%仍是前提，否则flex: 1无法伸展
用 min-height: 100vh + flex 布局撑满并自适应内容
单纯靠 min-height: 100vh 只能保证“至少一屏”，但页面内容超出时需自然滚动；若想让页脚永远贴底、中间区域弹性填充，就得组合 Flex。
典型场景：头部固定、主体区域最小占满剩余空间、页脚始终在视口底或内容尾部。
立即学习“前端免费学习笔记（深入）”；
-
html, body { height: 100%; margin: 0; }—— 缺一不可 -
body设为display: flex; flex-direction: column; - 主内容区（如
.main）加flex: 1; min-height: 0;（后者防止 flex item 因内部内容过长而溢出） - 避免给
.main再设min-height: 100vh，否则会和 flex 行为冲突
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.header { height: 60px; }
.main { flex: 1; min-height: 0; }
.footer { height: 40px; }移动端 iOS Safari 下 100vh 不准确怎么办
iOS Safari 中，地址栏收起/展开会动态改变视口高度，100vh 始终按初始视口计算，导致页面底部被遮挡或留白。这不是 bug，是规范行为。
根本原因：vh 单位基于「视觉视口（visual viewport）」，而 iOS 地址栏动画会改变其尺寸，但 CSS 未实时响应。
- 临时方案：用
min-height: 100dvh（dynamic viewport height），Chrome 102+ / Safari 16.4+ 支持，更可靠 - 兼容 fallback：JS 动态设置
style.minHeight = window.innerHeight + 'px'，并在resize和orientationchange时更新 - 注意：不要监听
scroll，iOS 触发太频繁；优先用visualViewportAPI（如有）
min-height 和 height 混用时的坑
有人为了“确保撑满”，同时写 height: 100vh; min-height: 100vh;，这毫无意义，且可能掩盖布局问题。
关键区别：height 是强制高度，内容超出会溢出或被裁剪；min-height 是下限，内容多就自动增高。
- 只要需求是“至少一屏，内容多就滚动”，只用
min-height，别碰height - 若父元素用了
overflow: hidden，再设min-height也无效——子元素根本没机会撑高 - Grid 布局中，
min-height对 grid container 本身有效，但对 grid item 生效需看 track 定义，比如grid-template-rows: auto 1fr auto才能让中间行弹性撑满
真正卡住的往往不是写法，而是没意识到 min-height 依赖的那层父级高度是否真实存在。检查到 html 就停，别跳过它。
