为什么 CSS 中的百分比高度不能按预期工作？

为什么百分比高度在 CSS 中不起作用？

在使用百分比时，了解 CSS 中块元素的固有行为至关重要 -为基础的尺寸。虽然百分比宽度按预期发挥作用，但百分比高度表现出一种矛盾的行为，可能会让开发人员感到困惑。

默认高度确定

默认情况下，块元素的高度为由其内容决定。换句话说，元素将垂直扩展以适应其内容所需的高度。这与 width 属性不同，width 属性本质上会水平扩展元素以填充其父级中的可用空间。

百分比悖论

当使用百分比来定义时元素的高度，它表示父元素高度的百分比。但是，由于父元素的高度通常取决于其子元素的高度，因此会创建反馈循环。将子元素的高度设置为百分比并不能提供可使用的具体值，因为它依赖于父元素的高度，而父元素的高度又依赖于子元素的高度。此循环会阻止建立明确定义的维度。

内容驱动的高度

与独立于内容的宽度相比，高度直接受元素包含的内容。这种依赖性使得必须为父元素提供特定的高度值，从而打破反馈循环并为子元素的百分比高度提供具体的参考点。

说明示例

考虑以下代码：

<div>
<pre class="brush:php;toolbar:false">#inner {
  height: 50%;
}

在此示例中，高度#inner 将取决于#outer 的高度。然而，#outer 的高度也取决于#inner 的高度。如果不指定 #outer 的高度，反馈循环将阻止 #inner 具有明确定义的高度。