height: 100% 失效的根本原因是父元素 computed height 为 auto，导致子元素无基准可依而算出 0px；必须逐层检查 computed height 是否为具体像素值，html 和 body 需同时设 height: 100%，flex 场景优先用 flex: 1 而非 height: 100%。
因为浏览器计算 height: 100% 时，只认**直接父元素的 computed height**；如果父元素是 height: auto（块级默认值），那子元素的 100% 就等于 0px —— 不是“没生效”，而是算出来就是 0。
父元素 height: auto 导致子元素 height: 100% 算出 0px
浏览器不会向上递归找高度，也不会“猜”父元素应该多高。它只看父元素当前计算后的 height 值：
- 若父元素 computed height 是
auto（比如普通<div>未设高、或被position: absolute脱离文档流），height: 100%就无基准可依，结果为 0px - 哪怕父元素视觉上撑开了（比如有内容、有 padding、有 border），只要 computed height 是
auto，子元素依然拿不到数值 -
min-height或max-height不提供百分比计算基准，只有height属性本身或视口单位（如vh）能作为源头
html 和 body 必须同时设 height: 100%
很多人只写 body { height: 100% }，但 body 的父元素是 html，而它的默认 height 也是 auto。没有 html 兜底，body 的 100% 就是空转。
- 最小必要配置：
html, body { margin: 0; padding: 0; height: 100%; } - 某些 CSS reset（如 Normalize.css）会重置
html的height，得用开发者工具「Computed」面板确认它确实是具体像素值，而不是auto - 仅靠
body { height: 100% }+display: flex也不行——flex 容器自身仍需高度上下文，否则子项的height: 100%还是算 0
Flex 容器里别硬套 height: 100%，改用 flex: 1
Flex 子项默认靠 align-items: stretch 拉伸，但这行为会被 min-height: 0（常见于 UI 库重置）或 align-self: flex-start 干掉。此时再写 height: 100% 是叠 buff，无效。
立即学习“前端免费学习笔记（深入）”；
- 更可靠的是：
flex: 1（即flex-grow: 1; flex-shrink: 1; flex-basis: 0），它从 0 开始拉伸，吃掉父容器剩余空间，不依赖父容器有没有显式height - 若父容器是
flex-direction: column，且已有固定高头部/底部，中间区域加flex: 1就能自动填满 - 注意前提：父容器必须是
display: flex或display: inline-flex；子元素不能被框架悄悄加了min-height: 0，否则要手动覆盖为min-height: auto
真正容易被忽略的，是没打开开发者工具逐层点开看
绝大多数人卡在“为什么我明明写了 html, body { height: 100% } 还是不行”，其实断点常在第三层：比如某个 .main 用了 position: relative + top: 10px，或者某个 <section> 被框架设了 display: inline，导致它不再是子元素的“包含块”。
- 打开浏览器开发者工具 → 选中目标元素 → 切到「Computed」面板 → 拉到底部查
height值 - 只要某一层显示
auto，就是断点；只有看到具体像素（如720px），才说明高度链路通了 - 别试十遍 CSS，先确认这一步 —— 它比所有 hack 都管用
