百分比高度height: 100%失效的根本原因是父元素computed height为auto，导致无法计算具体像素值；必须确保html、body及所有中间父容器均显式设置高度（如height: 100%或100vh），否则链路中断即失效。
百分比高度（height: 100%）在父元素未设高度时失效，不是浏览器 bug，而是 CSS 规范明确要求的计算逻辑：它必须基于**直接父元素的 computed height 像素值**来换算。如果父元素是 height: auto（块级默认值），那子元素的 100% 就等于 100% × 0px = 0px —— 浏览器没“忽略”你写的样式，它真算出来就是 0。
为什么只写 body { height: 100% } 还不行？
因为 body 的父元素是 html，而它的默认 height 也是 auto。没有 html 兜底，body 的 100% 就没源头可依。常见错误配置：
-
body { height: 100% }单独存在 →html仍是auto，链路断裂 - 用了 Normalize.css 或某些 UI 框架 → 它们可能重置了
html的height，导致你写的规则被覆盖 - 忘了清除
margin和padding→ 实际可用高度小于视口，尤其在旧 Safari 中明显
如何用开发者工具快速定位哪一层断了？
别猜，直接打开 DevTools，选中目标元素，切到「Computed」面板，看 height 值：
- 如果是
auto→ 说明它这一层的父容器没传下高度 - 如果是具体像素（如
720px）→ 链路通了，问题在更上层或子元素自身 - 点开每一级父节点重复检查 → 很多人卡在第三层，比如
.wrapper被position: relative包裹但没设高，或被框架悄悄加了min-height: 0
Flex 容器里写 height: 100% 为什么还无效？
Flex 容器本身不自动提供高度上下文；它只是布局方式，不是高度源头。只有当 Flex 容器自身已有明确高度（比如 height: 100vh 或父链已通），子项的 height: 100% 才能生效。更稳的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
flex: 1替代height: 100%：它从flex-basis: 0开始拉伸，吃掉剩余空间，不依赖父容器有没有显式height - 确保父容器是
display: flex或display: inline-flex - 手动覆盖 UI 库注入的
min-height: 0→ 改成min-height: auto，否则flex: 1会被压制
真正容易被忽略的，是没打开开发者工具逐层点开看 computed height —— 很多人反复改 .content 或 .main，却漏掉了中间某个 div 因为 display: inline 或 float 失去了包含块资格，导致整个链路在第二层就断了。
