CSS 高度：100% 與自動：有什麼不同？

理解CSS Height: 100% 與Height: Auto 之間的區別

在Web 開發領域，CSS 高度的概念: 100%和height: auto 可能會讓初學者感到困惑。為了闡明這兩個屬性之間的差異，讓我們深入研究它們的含義並透過範例來說明它們。

CSS height: 100%

當指定 height: 100% 時對於一個元素，實質上是讓它佔據其父容器高度的 100%。這意味著該元素將始終拉伸以填充其父級中可用的垂直空間。例如，如果您有一個高度為 50px 的 div，並且將 height: 100% 應用於其子 div，則子 div 的高度也將為 50px。

CSS height: auto

另一方面，在元素上設定 height: auto 可以讓它根據其內容自動調整其高度。此屬性不會將元素限制為特定的高度限制。相反，該元素將動態調整大小以容納其中的任何內容，而不管其父級的尺寸如何。以高度為 auto 的 div 和兩個高度分別為 10px 和 20px 的子 div 為例。父級 div 的高度將自動調整為 30px 以適合其子級的高度。

範例示範：

為了進一步說明這些概念，請考慮以下HTML和CSS 程式碼：

<div>
<p>在此範例中，# innerDiv 的高度：100% 並將佔據其父div 的整個50px 高度。 </p>
<pre class="brush:php;toolbar:false"><div>
<p>在這種情況下，#innerDiv 的 height: auto 並將自動調整自身大小以適應其高度為 10px 的子 div #evenInner 。因此，#innerDiv 的高度也將是 10px。 </p>
<p>綜上所述，CSS height: 100% 確保元素佔據其父容器的整個高度，而 CSS height: auto 允許元素佔據其父容器的整個高度。動態適應其內容，無論父級的尺寸為何。了解這些差異對於有效的網頁設計和佈局控制至關重要。 </p>
</div>