CSS为什么设置了Height却无法实现100%填充_解析父级盒模型高度坍塌

height: 100% 失效是因为父元素高度为 auto，需 html、body 同时设 height: 100%；100vh 虽便捷但受视口变化影响，嵌套或固定定位时易出错；推荐 flex: 1 或配合 min-height: 0 使用。

为什么 height: 100% 在 div 上完全没反应

因为浏览器根本算不出“100%”是多少。它需要一个明确的数值作为基准，而这个数值必须从 html 开始一路向下传递。如果中间任何一个父元素（包括 html、body、section）的高度是 auto（默认值），那么子元素的 height: 100% 就会失效，退化为内容撑开的高度——哪怕内容只有一行字，它也只高那么一点。

html 和 body 必须显式设高

这是最常漏掉的一环。很多人只写了 body { height: 100% }，但忘了 html 是 body 的父元素，而它的默认高度也是 auto。没有它兜底，body 的 100% 就无源可溯。

• html, body { margin: 0; padding: 0; height: 100%; } 是最小必要配置
• 仅设 body 高度无效；仅设 html 也不够，二者必须同时设置
• 如果用了 CSS reset 或 normalize，检查是否意外重置了 html 或 body 的 height

用 100vh 替代 height: 100% 的真实代价

100vh 看似一劳永逸，但它和视口高度强绑定，不随父容器变化，容易在移动端或缩放场景下出问题：

• 在 iOS Safari 中，地址栏收起/展开时 vh 值会重算，导致布局跳动
• 如果目标元素嵌套在有滚动容器（如 overflow: auto 的 div）里，100vh 会让它溢出该容器，脱离预期布局流
• 当页面存在固定定位（position: fixed）头部/底部时，100vh 仍按完整视口算，可能遮挡或留白
• 真正需要“占满父容器”的场合（比如 flex 子项、grid 区域），100vh 反而破坏约束，此时必须回归百分比链

检查父级是否意外脱离文档流

即使 html 和 body 都设了 height: 100%，若中间某层用了 position: absolute 或 float，它就不再作为子元素的“包含块”，height: 100% 会重新找最近的定位上下文或初始包含块计算，结果往往还是 auto。

立即学习“前端免费学习笔记（深入）”；

• 用浏览器开发者工具选中目标元素，看“Computed”面板里的 height 是否显示为具体像素值；如果是 auto，说明包含块未生效
• 检查父级是否设置了 display: inline 或 display: table-cell —— 这些 display 类型对百分比高度的支持极差
• Flex 容器子项用 flex: 1 比 height: 100% 更可靠；Grid 容器中直接用 grid-area 或 min-height: 0 配合 height: 100% 才稳

实际开发中最容易被忽略的，不是怎么写 CSS，而是忘记打开开发者工具，逐层点开父元素看它们的“Computed height”到底是不是你预期的数值。只要其中一层是 auto，整条链就断了。