为什么 CSS 中的百分比高度有时会导致意外行为？

CSS：了解百分比高度的怪癖

在 CSS 中，在使用百分比值时，高度属性可能是一个令人困惑的难题。与它的对应项宽度不同，宽度可以轻松地缩放到父元素的大小，百分比高度值通常会导致意外行为。

高度缺失的奥秘

考虑以下 HTML 和 CSS：

<div>

#working {
  width: 80%;
  height: 140px;
  background: orange;
}
#not-working {
  width: 80%;
  height: 30%;
  background: green;
}

虽然 #working 的宽度按预期计算为视口的 80%，但 #working 的高度#not-working 莫名其妙地变成了 0。

打破依赖

这个问题的症结在于 div 等块元素的默认高度。默认情况下，块元素的高度与其内容的大小一致。这会创建一个反馈循环：

<div>

这里，#inner 会扩展以适应其中的段落，而 #outer 会增长以适应 #inner。

百分比高度值会在此基础上添加另一层关系。当指定百分比高度时，例如 30%，它指的是父元素的高度。然而，父元素的高度受到子元素高度的影响，导致循环依赖。

解决方案

要解决这个困境，必须打破反馈循环。这可以通过显式设置父元素的高度来实现，有效地消除其对其子元素的依赖。例如，在上面的示例中，添加 #outer { height: 500px; } 将为 #outer 和 #not-working 提供明确定义的计算。

总之，虽然由于块元素宽度的独立性，百分比宽度值可以无缝工作，但百分比高度计算本质上是相关的内容并要求父元素有明确的高度定义。

以上是为什么 CSS 中的百分比高度有时会导致意外行为？的详细内容。更多信息请关注PHP中文网其他相关文章！