百分比高度不生效是因为父元素无明确高度，导致子元素无法计算对应像素值。解决方法是为父级链路设置具体高度，如 html, body { height: 100%; }，或使用 flex、grid 布局及视口单位 vh 等方案，确保高度上下文存在。
在CSS中设置容器的百分比高度无效，通常是因为父元素没有明确的高度值。百分比高度是相对于父元素计算的，如果父元素高度为“自动”（auto），子元素就无法正确解析百分比。
为什么百分比高度不生效？
当一个元素设置 height: 50% 时，它的实际高度取决于其包含块（通常是父元素）的height值。如果父元素没有设定具体高度（比如 height: auto 或未定义），浏览器无法计算出该百分比对应的具体像素值，因此会忽略这个设置，表现为“无效”。
解决方法：为父元素指定高度上下文
要让子元素的百分比高度生效，必须确保从根元素开始，每一层父级容器都提供了明确的高度值。常见做法如下：
- 给 html 和 body 设置高度，例如：
html, body { height: 100%; } - 逐层为父容器设置高度，确保路径上的每个祖先都有可计算的高度。
- 使用视口单位替代部分场景，如 height: 100vh 可直接让元素占满屏幕高度。
示例代码
以下是一个典型修复案例：
立即学习“前端免费学习笔记（深入）”；
html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
}
.child {
height: 50%; /* 现在能正确显示为父容器的一半高度 */
background-color: lightblue;
}
在这个结构中，.container 继承了 body 的 100% 高度，而 .child 才能基于此计算出自己的 50% 高度。
其他可行方案
除了设置父级 height 外，还可以考虑：
- 使用 flex 布局：父容器设为
display: flex后，子元素百分比高度通常能正常工作。 - 使用 grid 布局：类似 Flex，Grid 容器中的项目更容易支持百分比尺寸。
- 将高度改为 min-height 并配合其他布局方式，提升灵活性。
基本上就这些。关键是理解百分比高度依赖于“高度上下文”，只要链路上的父元素提供了可计算的高度，问题就能解决。
