父容器高度未明确导致百分比height失效，因CSS规定height:50%需基于父元素确定高度计算；若父高为auto则无基准，浏览器忽略该声明。
height 百分比失效的根本原因：父容器高度未明确
百分比 height 不生效，几乎总是因为**父级元素没有设置确定的高度值**。CSS 规范规定：height: 50% 表示“取父元素 height 计算值的 50%”，而如果父元素的 height 是 auto（默认值），那它的计算值就是“由内容撑开的高度”——此时百分比无基准，浏览器直接忽略，退回到 auto 行为。
哪些父容器高度算“确定值”？
只有满足以下任一条件，子元素的百分比 height 才可能生效：
- 父元素设置了具体的
height（如height: 200px、height: 10em） - 父元素设置了
height: 100vh或其他视口单位（vh/vmax等） - 父元素是绝对定位（
position: absolute）且同时设置了top和bottom（此时浏览器可推导出高度） - 父元素是 Flex 容器（
display: flex），且自身高度已确定，同时子项设为flex: 1或align-self: stretch
常见陷阱：body/html 没设高，导致整条链路失效
很多开发者给子元素写 height: 100%，却忘了向上追溯：html 和 body 默认高度也是 auto。只要其中任意一级是 auto，百分比就断在那一层。
html, body {
height: 100%;
}
.container {
height: 100%; /* 这时才真正有效 */
}注意：height: 100% 在 html 上是合法的，它相对初始包含块（即视口）；但对 body 来说，必须先让 html 有确定高度，它才能继承。
立即学习“前端免费学习笔记（深入）”；
替代方案：什么时候该用 min-height 或 flex？
硬塞 height: 100% 容易因内容溢出或响应式断层出问题。更健壮的做法：
- 用
min-height: 100vh保证至少占满视口，内容多时自动撑高 - 用 Flex 布局替代百分比高度：
html { display: flex; flex-direction: column; }+ 子容器flex: 1 - 用
position: absolute配合top: 0; bottom: 0;（需确保父级position不是static）
盒模型本身不决定百分比是否生效，但 padding、border、box-sizing 会影响最终视觉高度——记得检查是否意外触发了 box-sizing: content-box 导致内容区被压缩。
