CSS 高度：`100%` 與 `auto` – 真正的差異是什麼？

理解 CSS height: 100% 和 height: auto 之間的區別

在 CSS 中，height 屬性定義元素的垂直尺寸。但是，分配給它的值可能會導致不同的結果：

height: 100%

此值將元素的高度設定為元素高度的100%它的父容器。換句話說，元素填滿其父元素內的整個可用垂直空間。

height: auto

auto 表示元素的高度應根據自動計算取決於其內容的大小。當內容是動態的且其高度可能變化時，通常會使用此值。

說明範例

進一步說明差異：

範例1：高度：100%

<div>在此範例中，外部div 的固定高度為50px。為內部 div 分配 height: 100% 會使其填充其父容器的整個 50px。 <p></p>
<p>範例 2： height: auto<strong></strong></p>
<pre class="brush:php;toolbar:false"><div>在此例如，外部 div 的高度仍為 50px。由於內部 div 的 height: auto，它會調整其高度以適應其內容，在本例中是高度為 10px 的第二個 div。因此，內部 div 的高度將為 10px。 <p></p>
</div>