根本原因是父级链路上存在 height: auto 的容器，导致子元素无法计算具体像素值；百分比高度依赖包含块的显式高度，若任一祖先为 auto（如未设高的 html/body 或中间容器），则 100% of auto 无效，computed height 为 0px 或 auto。
百分比高度不生效，根本原因是父级链路上存在 height: auto 的容器，导致子元素无法计算具体像素值。
为什么 height: 100% 在 div 里经常失效
浏览器对宽度和高度的计算逻辑不对称：宽度默认会撑满父容器（除非内容超长），但高度默认是 auto —— 即由内容决定，不主动“继承”或“传递”高度。所以当你写 div { height: 100%; }，它实际是在问：“我父元素的高度是多少？”，而如果父元素是 body、html 或某个未设高度的中间容器，答案就是 auto，100% of auto 是无效计算，结果被忽略。
- 常见错误现象：元素背景色看不见、内容塌缩、开发者工具中显示 computed height 为
0px或auto - 容易被忽略的一层：
html和body都必须显式设高，只设body不够 —— 因为body的包含块是html - 移动端注意：Safari 中
100vh可能随地址栏收放跳变，若需稳定，优先用min-height: 100vh+height: auto
怎么快速让 height: 100% 生效（三类实操方案）
不用死磕“必须逐层设高”，有更直接、兼容性好、语义清晰的替代路径：
-
用
100vh替代100%：直接基于视口，跳过父级高度依赖。例如：.panel { height: 100vh; }。IE9+ 支持，注意避免和padding-bottom同时使用导致溢出 -
用 Flex 布局建立高度上下文：父容器设
display: flex+height: 100vh（或已知高度），子项加flex: 1即可填满剩余空间，无需百分比 -
用 Grid 布局控制分配：父容器设
display: grid; height: 100vh;，子项用grid-row: 1 / -1;或minmax(0, 1fr)实现等高拉伸
table 和 td 的百分比高度为什么更难搞
表格元素的渲染规则特殊：td 的 height 默认只是“最小高度”，实际高度由内容、行高、边框、table-layout 模式共同决定。即使你给 table 设了 height: 100%，也大概率无效。
- 可靠做法：给
table加table-layout: fixed;，再给td设固定height或min-height - 更现代解法：别用
table做布局，改用display: grid或display: flex模拟行列结构，高度控制更可控 - 滚动需求场景：把
table包进一个div { max-height: 400px; overflow-y: auto; }，而不是强求表格自身占满百分比高度
真正卡住人的往往不是“怎么写”，而是没意识到百分比高度本质是个“链式依赖”——只要其中一环是 auto，整条链就断了。与其层层补 height: 100%，不如用 vh 切断依赖，或用 Flex/Grid 重构高度上下文。后者长期看更健壮，尤其在响应式和动态内容场景下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
