CSS `height: auto` 和 `height: 100%` 有什麼不同？

理解CSS 中「height: auto」和「height: 100%」之間的細微差別

使用CSS 設計元素樣式時，屬性「height: auto」和「height: 100%」可用來控制元素的垂直尺寸。然而，了解它們的不同行為對於實現預期結果至關重要。

'height: 100%'

當 'height: 100%' 應用於元素時，它繼承其父容器的垂直空間。換句話說，它根據父級的高度進行拉伸和收縮。

例如，如果您有一個

高度為 500px 並應用 'height: 100%;'對其子元素 'innerDiv' 來說，'innerDiv' 的高度也將是 500px。

'height: auto'

相反，'height: auto'將元素的高度設定為其固有大小。這意味著它將適應它包含的內容，允許子元素影響其尺寸。

例如，如果我們將另一個子元素“evenInner”添加到“innerDiv”，高度為 10px，則“innerDiv”會自動將其高度調整為 10px，無論其父容器的高度如何高度。

例：

<div>
<p>在這種情況下， 'innerDiv' 的高度為 500px，因為它繼承自其父級。 </p>
<pre class="brush:php;toolbar:false"><div><p>這裡，'innerDiv' 的高度為 10px，因為它的子元素'evenInner' 需要這個空間。 </p></div>