CSS 高度：`100%` 与 `auto` – 真正的区别是什么？

理解 CSS height: 100% 和 height: auto 之间的区别

在 CSS 中，height 属性定义元素的垂直尺寸。但是，分配给它的值可能会导致不同的结果：

height: 100%

此值将元素的高度设置为元素高度的 100%它的父容器。换句话说，元素填充其父元素内的整个可用垂直空间。

height: auto

auto 表示元素的高度应根据自动计算取决于其内容的大小。当内容是动态的且其高度可能变化时，通常会使用此值。

说明示例

进一步说明差异：

示例1：高度： 100%

<div>
<p>在此示例中，外部 div 的固定高度为 50px。为内部 div 分配 height: 100% 会使其填充其父容器的整个 50px。</p>
<p><strong>示例 2： height: auto</strong></p>
<pre class="brush:php;toolbar:false"><div><p>在此例如，外部 div 的高度仍然为 50px。由于内部 div 的 height: auto，它会调整其高度以适应其内容，在本例中是高度为 10px 的第二个 div。因此，内部 div 的高度将为 10px。</p></div>