当父元素有最小高度/最大高度值但没有高度值时，为什么子元素上的 height: 100% 不适用？

Question

假设我们有以下设置：

.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设置为even时1px，元素会突然以高度child填充整个。container300px

.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之前设置高度呢？childheight: 100%

编辑：要明确的是，我并不是在寻找让子高度占据整个父元素的解决方案，我只是想了解为什么会这样。

Answer 1

在第一种情况下，您没有定义任何高度，因此很明显，孩子的百分比高度将失败。

从规格来看：

指定百分比高度。百分比是根据生成的盒子的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素未绝对定位，则该值计算为“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”属性的使用值：

1. 暂定使用的高度是按照上面“计算高度和边距”下的规则计算的（没有“最小高度”和“最大高度”）。
2. 如果此暂定高度大于“max-height”，则再次应用上述规则，但这次使用“max-height”的值作为“height”的计算值。
3. 如果生成的高度小于 'min-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>