当父元素只有'min-height”时，为什么我的子元素不继承高度？

子元素高度未与父元素最小高度/最大高度一起应用且没有显式高度

问题：

考虑以下 CSS：

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

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

尽管子元素的高度设置为 100%，当父元素有 min-height 值但没有明确的高度时，子元素不占用任何高度。只有当父元素的高度设置为偶数 1px 时，子元素才能正确填充容器。

说明：

第一种情况（没有明确的高度父级），子级的百分比高度失败，因为：

根据 CSS规范：

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

Min-height 仅提供最小边界，元素的高度仍然取决于其内容。

为了说明，请考虑以下修改例如：

.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;
  }
}

这里，容器显式设置了一个小的填充，这强制子元素的最大高度小于 300px。动画动态改变孩子的高度，表明孩子的高度确实取决于可用空间，而不仅仅是其 100% 高度设置。

以上是当父元素只有'min-height”时，为什么我的子元素不继承高度？的详细内容。更多信息请关注PHP中文网其他相关文章！