假设我们有以下设置：
.container {
background-color: red;
width: 500px;
min-height: 300px;
}
.child {
background-color: blue;
width: 500px;
height: 100%;
}
<div class="container">
<div class="child">
</div>
</div>
很明显，container元素正在渲染，高度设置为300px，但是child元素没有任何高度，尽管设置为100%.
当高度为container元素设置为偶数1px, the child元素会突然充满整个container高度为300px.
.container {
background-color: red;
width: 500px;
min-height: 300px;
height: 1px;
}
.child {
background-color: blue;
width: 500px;
height: 100%;
}
<div class="container">
<div class="child">
</div>
</div>
The container元素清晰地呈现在300px即使没有设置高度，为什么需要在之前设置高度child元素实际上应用了它的height: 100%?
编辑：要明确的是，我并不是在寻找让子高度占据整个父元素的解决方案，我只是想了解为什么会这样。
在第一种情况下，您没有定义任何高度，因此很明显，孩子的百分比高度将失败。
From 规格 https://www.w3.org/TR/CSS21/visudet.html#the-height-property:
指定百分比高度。百分比是根据生成的盒子的包含块的高度计算的。如果包含块的高度不是明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，该值计算为“auto”。
min-height只是一个边界，元素的高度仍然取决于其内容。如果你有一个超过300px该元素将有超过300px
.container {
background-color: red;
width: 500px;
min-height: 300px;
padding:10px;
}
.child {
background-color: blue;
width: 500px;
height: 400px;
animation:change 2s linear infinite alternate;
}
@keyframes change{
from {
height:100px;
}
}
<div class="container">
<div class="child">
</div>
</div>
在第二种情况下，您指定了高度，因此百分比将起作用，但高度计算有点棘手，因为我们还有min-height
以下算法描述了这两个属性如何影响“height”属性的使用值：
- 暂定使用的高度是按照上面“计算高度和边距”下的规则计算的（没有“最小高度”和“最大高度”）。
- 如果此暂定高度大于“max-height”，则再次应用上述规则，但这次使用“max-height”的值作为“height”的计算值。
- 如果由此产生的高度小于“最小高度”，再次应用上面的规则，但这次使用'min-height' 的值作为 'height' 的计算值.
在第二种情况下，就像你明确定义的height:300px和百分比将考虑该值。在这种情况下，即使内容更大，父元素也不会增长，并且会溢出。您甚至可以定义等于0.
.container {
background-color: red;
width: 500px;
min-height: 300px;
height: 0;
padding:10px;
}
.child {
background-color: blue;
width: 500px;
height: 400px;
animation:change 2s linear infinite alternate;
}
@keyframes change{
from {
height:100px;
}
}
<div class="container">
<div class="child">
</div>
</div>
同样的逻辑会发生max-height但在这种情况下高度需要很大
.container {
background-color: red;
width: 500px;
max-height: 300px;
height: 99999px;
padding:10px;
}
.child {
background-color: blue;
width: 500px;
height: 400px;
animation:change 2s linear infinite alternate;
}
@keyframes change{
from {
height:100px;
}
}
<div class="container">
<div class="child">
</div>
</div>
如果您有兴趣，可以使用 Flexbox 转换您的逻辑，并且您将能够做您想做的事情，而无需设置明确的高度。
依赖于横轴上的默认拉伸对齐
.container {
background-color: red;
width: 500px;
min-height: 300px;
display:flex;
}
.child {
background-color: blue;
width: 500px;
/* height: 100%;*/
}
<div class="container">
<div class="child">
</div>
</div>
或者使用flex-grow属性而不是主轴的高度：
.container {
background-color: red;
width: 500px;
min-height: 300px;
display:flex;
flex-direction:column;
}
.child {
background-color: blue;
width: 500px;
flex-grow:0.8; /* this is 80%, use 1 for 100% */
}
<div class="container">
<div class="child">
</div>
</div>
CSS 网格也可以处理这个问题
.container {
background-color: red;
width: 500px;
min-height: 300px;
display:grid;
grid-template-rows:1fr;
}
.child {
background-color: blue;
width: 500px;
height:80%;
}
<div class="container">
<div class="child">
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
