本文旨在解释CSS中`height: 100%`属性在特定情况下（父元素未设置固定高度）失效的原因，并提供解决方案。我们将通过示例代码演示该问题，并介绍如何通过设置父元素的`display`属性和子元素的`height`属性来解决该问题，从而使子元素的高度正确地填充父元素。
在CSS布局中，我们经常使用height: 100%来让子元素的高度填充父元素。然而，有时我们会发现height: 100%并没有如预期那样工作，子元素的高度变成了0。这通常发生在父元素没有明确指定高度的情况下。
问题分析
height: 100% 的百分比高度是基于包含块的高度计算的。如果包含块（即父元素）没有一个明确且固定的高度，那么这个百分比高度就是无效的，浏览器会将其视为 auto。当元素的高度为 auto 且没有内容时，其高度默认为0。
考虑以下HTML结构和CSS样式：
立即学习“前端免费学习笔记（深入）”；
<body>
<div class="outer">
<div class="inner">
<div class="inner-inner"></div>
</div>
</div>
</body>.outer {
background-color: yellow;
height: 1000px;
width: 300px;
}
.inner {
min-height: 500px;
width: 200px;
background-color: green;
}
.inner-inner {
height: 100%;
width: 100px;
background-color: aqua;
}在这个例子中，.inner-inner 元素的 height: 100% 并没有生效，因为 .inner 元素虽然设置了 min-height: 500px，但没有设置明确的 height 值。
解决方案
要解决这个问题，需要确保父元素具有明确的高度。一种常见的解决方案是为父元素设置 display 属性为 flex 或 grid，并结合使用 height: fill 或者 height: 100%。
修改后的CSS代码如下：
* {
box-sizing: border-box;
}
.outer {
background-color: yellow;
height: 1000px;
width: 300px;
}
.inner {
min-height: 500px;
width: 200px;
background-color: green;
display: flex; /* 或者 display: grid; */
}
.inner-inner {
height: fill; /* 或者 height: 100%; */
width: 100px;
background-color: aqua;
}在这个修改后的代码中，我们将 .inner 元素的 display 属性设置为 flex。这使得 .inner-inner 元素可以正确地继承并填充父元素的高度。 也可以使用 grid 布局达到类似的效果。同时，我们也可以将 .inner-inner 的 height 设置为 fill 或者 100%。
注意事项
- 确保所有父元素（直到具有固定高度的祖先元素）都正确设置了高度，或者使用了 Flexbox 或 Grid 布局。
- 使用 box-sizing: border-box 可以避免 padding 和 border 影响元素的最终尺寸。
总结
height: 100% 的行为依赖于父元素的明确高度。当父元素没有明确的高度时，height: 100% 将不会生效。通过设置父元素的 display 属性为 flex 或 grid，并结合使用 height: fill 或者 height: 100%，可以解决这个问题，确保子元素正确地填充父元素的高度。理解这一原理对于编写健壮的CSS布局至关重要。
