当父元素有'min-height”/'max-height”但没有显式高度时，为什么'height: 100%”在子元素上失败？

为什么当父元素有最小高度/最大高度值但没有指定高度值时，子元素上的 Height: 100% 无法应用？

考虑以下 HTML 和 CSS setup:

<div class="container">
  <div class="child"></div>
</div>

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

在这种情况下，容器元素按照预期以 300px 的高度渲染，但尽管声明了 height: 100%，但子元素仍然没有任何高度。

但是，给容器元素添加一个小的高度值（例如 1px）会导致子元素突然充满整个容器，高度为300px:

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  height: 1px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

此行为源于 CSS 规范本身。当未明确定义元素的高度时，其子元素的百分比高度将失败。根据规范：

指定百分比高度。百分比是根据生成的盒子的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为“auto”。

在初始情况下，由于容器元素的高度未显式设置，子元素的 height: 100% 变为“auto”。这意味着它只会占用其内容所需的空间，从而导致不可见的高度。

向容器元素添加高度值（甚至小至 1px）显式定义其高度，从而允许子元素element's height: 100% 来计算并应用正确的高度。

因此，看似意外的行为源于这样一个事实：父元素的高度需要为其子元素显式定义正确计算他们的身高百分比。

以上是当父元素有'min-height”/'max-height”但没有显式高度时，为什么'height: 100%”在子元素上失败？的详细内容。更多信息请关注PHP中文网其他相关文章！