height: 100% 失效主因是浏览器对父容器高度计算逻辑不一，尤其 html/body 未设 height: 100%、table-layout: auto、Flex 子项显式设高、绝对定位参照块缺失或为 auto 时，均导致百分比链中断。
height: 100% 在不同浏览器里表现不一致，根本不是“写法错了”，而是浏览器压根没算出同一个数值——因为它们对“父容器高度是多少”的判定逻辑不同，尤其在链路中断、布局模式混用或引擎解析缺陷时，结果天然分化。
html 和 body 没设 height: 100% 就注定失败
这是最常见断点：Chrome、Firefox、Safari 都默认 html 和 body 的 computed height 是 auto。只要其中任意一个没显式设 height: 100%，整条百分比链就归零。Safari 更敏感，有时连 min-height: 100% 都不认，必须是 height 声明。
- 务必同时写
html, body { height: 100%; }，只写body在 Safari 或旧版 iOS WebKit 中大概率失效 - 某些 CSS reset（如 Normalize.css）会重置
html高度，需检查开发者工具中html的 Computed → height 是否为具体像素值 - 若用了
box-sizing: border-box，记得确认padding和border没把内容区域挤塌
table-layout: auto 下 height 百分比根本不可靠
table-layout: auto（默认值）只管列宽推算，完全不保证行高或单元格能继承百分比高度。各浏览器处理差异极大：
- Safari 倾向让
td高度由内容撑开，height: 100%被忽略 - Chrome 可能尝试继承
tr高度，但tr自身高度常为 auto，导致子项算出 0px - Firefox 常直接 fallback 到
auto，height声明形同虚设 - 修复前提：改用
table-layout: fixed+table { width: 100%; }+ 所有父容器显式设高
Flex 容器里写 height: 100% 实际禁用拉伸
Flex 子项一旦声明 height: 100%，浏览器就认为你手动接管高度控制，主动放弃 align-items: stretch 行为——哪怕父容器有明确高度，子项也不会自动撑满。
立即学习“前端免费学习笔记（深入）”；
- Safari 14–15.6 存在引擎级缺陷：即使父容器写了
height: 100vh，子项height: 100%仍退化为 auto - Chrome/Firefox 要求 Flex 父容器自身必须有
height（不能只靠min-height或flex: 1推导） - 更稳方案：
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），但需确保父容器是display: flex且自身有确定高度 - 注意 UI 库常给子项加
min-height: 0，这会卡住flex: 1拉伸，需覆盖为min-height: auto
绝对定位元素的 height: 100% 参照物错乱
绝对定位元素不看 DOM 父子关系，只找最近的非 static 定位祖先。如果没找到，就 fallback 到视口——所以你在 .popup 里写 height: 100%，结果占满整个屏幕，不是 bug，是规范行为。
- 常见坑：
.popup { position: relative; }但它的height是 auto，子元素height: 100%实际算的是 100% × 0px = 0px - 验证方法：开发者工具 → Computed → 查
height值，若是0px或auto，说明包含块失效 - 修复优先级：给最近的定位祖先加
height: 100vh；或彻底绕过，用top: 60px; bottom: 20px; - 移动端尤其危险：横竖屏切换、地址栏收起/展开都会让参照容器高度突变，
top: 30%这类定位立刻飘移
真正容易被忽略的，是开发者工具里那一层层 Computed height 的实际值——不是看源码写了什么，而是看每一级是否真算出了像素数。哪怕只有一层是 auto，后面所有 height: 100% 都是在空气里计算。
