<div>元素是HTML中的一個重要標簽，它用于創建一個可容納其他HTML標簽的容器。相比于其他標簽，<div> 具有無可匹敵的靈活性，通過CSS可以對其進行各種樣式的控制，包括它的寬度和高度。本文將重點探討如何使用CSS控制<div>元素的高度，并通過幾個代碼案例進行詳細說明。
在HTML中，可以通過CSS的height屬性來設置<div>元素的高度。height屬性可以使用絕對單位（如px、cm等）或百分比來表示高度。以下是一些代碼案例，說明如何使用CSS控制<div>元素的高度。

案例一：使用固定高度

<div style="height: 200px; background-color: #f2f2f2;">
<h2>固定高度的<div>元素</h2>
<p>這是一個具有固定高度的<div>元素。</p>
<p>它使用了200px的高度。</p>
</div>

案例二：使用百分比高度

<div style="height: 50%; background-color: #f2f2f2;">
<h2>百分比高度的<div>元素</h2>
<p>這是一個具有百分比高度的<div>元素。</p>
<p>它使用了父元素高度的50%。</p>
</div>

案例三：使用min-height和max-height

<div style="min-height: 100px; max-height: 300px; overflow: auto; background-color: #f2f2f2;">
<h2>范圍限制的<div>元素</h2>
<p>這是一個具有范圍限制的<div>元素。</p>
<p>它的高度最小為100px，最大為300px，超出范圍時出現滾動條。</p>
</div>

<div>元素的高度控制是網頁布局設計中一個重要的技巧。通過設置<div>的高度，我們可以實現各種復雜布局效果。無論是固定高度、百分比高度還是范圍限制，<div>元素的高度控制都可以根據實際需求進行靈活設置。</div>