问题描述
假设我们进行了以下设置:
Say we have the following set up:
.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%.
It's clear that the container element is rendering with a height set to 300px, but the child element has no height whatsoever, despite being set to 100%.
当container元素的高度设置为均匀的1px时，child元素将突然以高度300px填充整个container.
When the height of the container element is set to even 1px, the child element will suddenly fill the entire container with a height of 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>即使未设置高度，container元素也明显在300px处渲染，为什么在child元素实际应用height: 100%之前为什么需要设置高度?
The container element is clearly rendering at 300px even without height being set so why does it require setting the height before the child element actually applies it's height: 100%?
为了清楚起见，我并不是在寻找让子高占据整个父元素的解决方案，我只是想了解为什么这样做会如此.
To be clear, I'm not looking for a solution to having the child height take up the entire parent element, I would just like to understand why this behaves like this.
推荐答案
在第一种情况下，您没有定义任何高度，因此很明显，子级上的precentcent高度将失败.
In the first case, you don't have any height defined so it's clear that the precentage height on child will fail.
来自规范:
min-height仅仅是边界，并且元素的高度仍取决于其内容.如果您有一个超过300px的元素，则该元素将有超过300px
min-height is only a boundary and the height of your element still depend on its content. If you will have one that exceed 300px the element will have more than 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
In the second case you have specified a height so the precentage will work but the height calculation is a bit tricky since we also have min-height
- 按照计算高度和边距"下的规则计算临时使用的高度(不包括最小高度"和最大高度").以上.
- 如果此暂定高度大于"max-height"，则会再次应用上述规则，但是这次使用"max-height"的值作为"height"的计算值.
- 如果所得的 height小于'min-height'，则再次应用上述规则，但这一次使用'min-height'的值作为高度" .
- The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
- If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
- If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.
在第二种情况下，就像您明确定义了height:300px一样，百分比将考虑该值.在这种情况下，即使内容更大，父元素也不会增长，并且您将发生溢出.您甚至可以定义等于0的高度.
In the second case, it's like you explicitely defined height:300px and percentage will consider this value. In this situation, even if the content is bigger the parent element will not grow and you will have overflow. You can even define a height equal to 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将发生相同的逻辑，但是在这种情况下，高度必须非常大
Same logic will happen with max-height but in this case the height need to be very big
.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>这篇关于为什么当父元素具有最小高度值但没有高度值时，子元素上的height:100％不适用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！