height: 100%失效是因为父元素computed height为auto导致100%×0px=0px；需用开发者工具逐层检查html、body及各父级的Computed height是否均为具体像素值，任一层为auto则整条高度链中断。
因为父元素的 computed height 是 auto，浏览器算出来就是 0px —— 不是没执行，而是 100% × 0 = 0。
怎么确认是不是 height 链断了
打开浏览器开发者工具，选中目标元素 → 切到「Computed」面板 → 找 height 行。如果显示 auto，说明它没拿到高度基准；如果是具体像素（如 480px）或 100vh，问题在更上层或被覆盖。
- 必须逐层往上点：目标元素 → 父级 → 祖父级 →
body→html，中间任意一层是auto，整条链就失效 - 特别注意
position: absolute元素：它的包含块可能跳过视觉父级，直接回退到html或视口，此时要查的是那个“真正包含块”的height -
display: inline、display: table-cell、float的父元素无法作为有效包含块，百分比高度会跳过它向上查找
html 和 body 没设高是最常见断点
很多人只写 body { height: 100%; }，但 body 的父级是 html，而它的默认 height 就是 auto。结果就是 body 的 100% 乘了个 0。
- 必须同时写：
html, body { margin: 0; padding: 0; height: 100%; } - 某些 CSS reset（比如 Normalize.css）会悄悄重置
html或body的height，得靠「Computed」面板确认它们确实是像素值，不是auto - 漏掉
margin: 0或padding: 0可能导致实际可用高度小于 100%，尤其在旧版 Safari 中
Flex 容器里写 height: 100% 反而禁用拉伸
Flex 子项一旦声明 height: 100%，浏览器就认为你手动接管高度控制，会忽略默认的 align-items: stretch 行为——即使父容器有明确高度，子项也不会自动拉伸。
- 删掉所有子元素上的
height: 100%、min-height: 100%、max-height: 100% - 想填满剩余空间？直接用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 嵌套 Flex 时，子 Flex 容器需加
min-height: 0，否则默认min-height: auto会阻止内部flex: 1生效 - 别同时写
align-self: stretch和height: 100%—— 前者是默认行为，后者冗余，且在 Safari 14–15.6 中可能触发兼容问题
最常被忽略的是：即使 computed height 链通了，box-sizing: content-box 下的 padding 和 border 仍会让视觉高度溢出或错位；而 position: sticky 在 height: 100% 的父容器里根本不会启动——因为它需要可滚动上下文，而 0px 高度容器连滚动条都不会出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
