父元素computed height为auto时，height:100%按规范计算为100%×0px=0px，并非忽略而是真得出0；需逐层检查html、body及所有中间父级的computed height是否均为具体值，任一层为auto则整条链中断。
因为浏览器严格按 CSS 规范计算：当父元素 computed height 是 auto 时，子元素的 height: 100% 等价于 100% × 0px = 0px，不是“忽略”，而是真算出零。
父元素 height: auto 为什么等于 0 像素基准
CSS 规范明确要求，百分比高度必须基于**直接父元素的 computed height 像素值**换算。块级元素默认 height: auto，表示“由内容撑开”，此时没有确定像素值——浏览器无法从中提取一个数字去乘以 80% 或 100%，只能退化为 auto（即内容高度）或在某些场景下直接得 0px。
常见现象包括：
-
#t-area { height: 80%; }在未设高的#t-box内显示为一行高，Computed → height显示auto或极小值（如1.2em） - Flex 容器里写
height: 100%后子项反而不拉伸，因为align-items: stretch被显式高度禁用 - 移动端 iOS Safari 中，
height: 100%渲染为一条细线，Computed面板里该层及上层父节点的height全是auto
如何快速定位哪一层断了高度链
别靠猜，用开发者工具逐层查 Computed → height：
- 从目标元素开始，点开它 → 查
height值：如果是auto，说明它这一层没拿到高度基准 - 立刻点开它的父节点 → 同样查
height：若仍是auto，继续往上；直到某一层是具体像素（如720px）或100vh - 特别注意中间是否出现：
display: inline、float: left、position: absolute（无定位祖先）、min-height: 0（UI 库注入）——这些都会让元素失去“包含块”资格
html 和 body 必须同时设高，缺一不可
很多人只写 body { height: 100% }，但 body 的父元素是 html，而它的默认 height 也是 auto。链路在第一环就断了。
正确写法（含兜底）：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
但要注意：
- Normalize.css 或某些 UI 框架（如 Ant Design、Chakra UI）可能重置了
html的height，需检查是否被覆盖 - 若用了
display: flex布局，html, body { height: 100% }仍不够——中间容器如.wrapper也得加height: 100%或min-height: 0 -
100vh虽绕过链路，但在 iOS Safari 地址栏收起/展开时会触发重绘跳动，慎用于可滚动区域
Flex 容器中别硬套 height: 100%
Flex 子项默认靠 align-items: stretch 拉伸填满交叉轴，但一旦你给子项写 height: 100%，浏览器就认为你手动接管高度控制，自动放弃 stretch 行为。
更稳的做法：
- 删掉所有子元素上的
height: 100%、min-height: 100% - 用
flex: 1替代（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 嵌套 Flex 时，中间容器要加
min-height: 0，否则默认min-height: auto会阻止内部flex: 1生效 - 避免同时写
align-self: stretch和height: 100%——前者是默认，后者冗余且在 Safari 14–15.6 中有兼容问题
真正容易被忽略的，是没打开开发者工具逐层点开看 Computed → height —— 很多人反复改 .content 或 .main，却漏掉了中间某个 div 因为 display: inline 或被框架悄悄加了 min-height: 0，导致高度链在第二层就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
