父元素 height 为 auto 时，子元素 height: 100% 计算结果为 0px；必须确保从 html 开始每层父元素的 computed height 均为具体值，推荐用开发者工具逐层验证。
父元素 height 是 auto，100% 就是 0px
浏览器计算 height: 100% 时，只看**直接父元素的 computed height**。如果父元素是 height: auto（块级元素默认值），那子元素的 100% 就等于 0px —— 它不是“没生效”，而是算出来就是 0，自然塌缩成一条线甚至看不见。
常见误判场景：
- 写了
.container { height: 100% }，但它的父级（比如body）没设高 - 父容器用了
display: flex或display: grid，但自身高度仍是auto，没被任何高度来源撑开 - 父元素是
position: absolute且没配top/bottom，导致它脱离文档流、高度坍缩
html 和 body 必须同时设 height: 100%
很多人只写 body { height: 100% }，结果还是无效——因为 html 是 body 的父元素，而它的默认 height 也是 auto。没有 html 兜底，body 的 100% 就无源可溯。
最小必要配置是：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
还要注意：CSS reset 或 Normalize.css 可能悄悄重置了 html 或 body 的 height，得用开发者工具的「Computed」面板确认它们的 height 确实是具体像素值，而不是 auto。
Flex 容器里别硬套 height: 100%，改用 flex: 1
在 display: flex 的父容器中，height: 100% 大概率失效，不是写错了，是 Flex 容器默认 height: auto，子项的百分比依然无基准可算。
更可靠的做法是让子项用 flex: 1：
-
flex: 1展开为flex-grow: 1; flex-shrink: 1; flex-basis: 0，它从 0 开始拉伸，吃掉父容器剩余空间，不依赖父容器有没有显式高度 - 若父容器是
flex-direction: column，且已有固定高头部/底部，中间区域加flex: 1就能自动填满 - 某些 UI 库会偷偷给子项加
min-height: 0，这会卡住拉伸，需手动覆盖为min-height: auto或删掉
检查包含块是否被 display 或 position 破坏
即使 html 和 body 都设了 height: 100%，中间某层用了这些样式，也会让子元素的 height: 100% 失效：
-
display: inline、display: table-cell、display: float：这些 display 类型无法作为有效的「包含块」，子元素会跳过它，往上找最近的定位上下文或初始包含块 -
position: absolute：该元素脱离文档流，其子元素的百分比高度将基于「包含块」（通常是最近的position: relative/absolute/fixed祖先），而不是视觉上的直接父级
真正容易被忽略的，不是怎么写 CSS，而是没打开开发者工具，逐层点开目标元素及其所有父级，看「Computed」面板里的 height 值——只要其中一个是 auto，链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
