百分比高度不生效是因为父元素 computed height 为 auto，100% × auto = 0px；必须显式设置 html 和 body 的 height: 100% 或使用 100vh、flex: 1 等替代方案。
百分比高度（如 height: 100%）在父元素未设明确高度时“不生效”，不是 CSS 写错了，而是浏览器按规范算出了 0px——因为它的计算公式是：100% × 父元素 computed height，而父元素 computed height 是 auto，100% × auto = 0px。
为什么父元素 height: auto 就等于没高度？
浏览器只看直接父元素的 计算后高度值（computed height），不递归、不猜测、不估算。只要父元素的 computed height 是 auto（块级元素默认值），子元素的 height: 100% 就失去参照，结果强制为 0px，视觉上就是“塌了”或“看不见”。
-
padding、border、内容撑开的高度，都不影响 computed height 为auto的事实 -
min-height或max-height不提供百分比计算基准，只有height属性本身或视口单位（如100vh）能作为源头 - 即使父元素用了
display: flex，它默认仍是height: auto，不会自动变成“有高度的容器”
为什么必须同时设置 html 和 body？
body 的父元素是 html，而 html 默认 height: auto。只写 body { height: 100% }，等于让 body 去继承一个 auto 值，结果还是 auto。
- 最小必要配置：
html, body { margin: 0; padding: 0; height: 100%; } - 某些 CSS reset（如 Normalize.css）会重置
html的height，导致你写的规则被覆盖 - 用开发者工具选中
html→ 「Computed」面板 → 查height是否为具体像素（如720px）或100%，而不是auto
Flex 容器里写 height: 100% 为什么还无效？
Flex 容器只是布局方式，不是高度源头。它自身若为 height: auto，子项的 height: 100% 就是 100% × 0px = 0px。
- 不要依赖
align-items: stretch拉伸子项——它需要父容器先有可拉伸的空间，而空间来自父容器的明确高度 - UI 框架（如 Ant Design）常给容器加
min-height: 0，这会压制stretch行为，需手动覆盖为min-height: auto - 更稳的做法是改用
flex: 1：它基于主轴剩余空间分配，不依赖父容器有没有像素高度；但前提是父容器已设display: flex，且自身有高度来源（如height: 100vh或被上层flex: 1撑开）
真正容易被忽略的检查点
不是“写了没生效”，而是“写了但没起作用”，因为你没打开开发者工具逐层点开看 computed height。常见断点不在最外层，而在中间某一层：
- 某个
div被加了position: absolute，它就不再是子元素的包含块 - 某层用了
display: inline或float，导致它丧失作为包含块的资格 - 嵌套 Flex 中，外层
column容器写了height: 100vh，但内层row容器漏了height: 100%，Safari 14–15.6 就直接跳过整条链
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
