<div>元素的高度填充是一項常見的前端開發任務。當我們想要讓<div>元素的高度自適應其內容時，有時會遇到一些困難。本文將通過幾個具體的代碼案例來解釋如何實現<div>元素的高度填充。</div>
<div>案例一：</div>

假設我們有一個<div>元素，其中包含一些文本內容。

<div id="example1">
這是一段文本。
這是一段文本。
這是一段文本。
</div>

如果我們想要讓<div>元素的高度自適應其內容，可以嘗試使用CSS的屬性"height: fit-content;" 設置<div>元素的樣式。

#example1 {
height: fit-content;
}

這樣，<div>元素的高度將自動根據其內容的高度來調整。

<div>案例二：</div>

如果我們的<div>元素中包含了其他元素，如

標簽、<img>標簽等，該如何實現高度填充呢？

<div id="example2">
<p>這是一個段落。</p>
<img src="image.jpg" alt="圖片">
</div>

要實現<div>元素的高度填充，可以設置它的樣式為"height: 100%;"。

#example2 {
height: 100%;
}

這樣，<div>元素的高度將填充其父元素的全部可用高度，包括其中的其他元素。

<div>案例三：</div>

有時，我們希望<div>元素的高度填充屏幕的剩余空間，而不是填充其父元素的全部可用高度。這可以通過CSS的"height: 100vh;"來實現。

#example3 {
height: 100vh;
}

這樣，<div>元素的高度將填充屏幕的剩余空間，無論其內容大小如何。

<div>結論：</div>

通過上述幾個代碼案例，我們可以看到不同情況下如何實現<div>元素的高度填充。根據需求的不同，我們可以使用"height: fit-content;"、"height: 100%;"或"height: 100vh;"來實現相應的效果。