为什么当父元素具有最小高度值但没有高度值时，子元素上的height:100％不适用? [英] Why does height: 100% on a child element not apply when the parent element has a min-height value but no height value?

问题描述

假设我们进行了以下设置:

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.

来自规范:

指定百分比高度.相对于生成的框的包含块的高度计算百分比.如果包含块的高度未明确指定(即，它取决于内容的高度)，并且该元素的位置不是绝对的，则该值将计算为自动".

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

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

以下算法描述了这两个属性如何影响'height'属性的使用值:

The following algorithm describes how the two properties influence the used value of the 'height' property:

1. 按照计算高度和边距"下的规则计算临时使用的高度(不包括最小高度"和最大高度").以上.
2. 如果此暂定高度大于"max-height"，则会再次应用上述规则，但是这次使用"max-height"的值作为"height"的计算值.
3. 如果所得的 height小于'min-height'，则再次应用上述规则，但这一次使用'min-height'的值作为高度" .

1. The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
2. 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'.
3. 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％不适用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！