<div> 高度占滿是指使一個 <div> 元素的高度自動適應其父元素的高度。在網頁布局中，經常會遇到需要將一個 <div> 元素的高度占滿其父元素的情況，這樣可以保證整個布局看起來更加美觀和一致。在本文中，我們將通過幾個代碼案例來詳細解釋如何實現 <div> 高度占滿的效果。
案例一： 假設我們有一個父元素 <div>，寬度為500px，高度為400px，背景色為灰色。我們要將內部的子元素 <div> 的高度設置為和父元素的高度一樣，以實現高度占滿的效果。這個時候，我們可以通過如下代碼實現：

<p><style></p>
<p> .parent {</p>
<p>   width: 500px;</p>
<p>   height: 400px;</p>
<p>   background-color: gray;</p>
<p>   position: relative;</p>
<p> }</p>
<p> </p>
<p> .child {</p>
<p>   height: 100%;</p>
<p>   background-color: red;</p>
<p> }</p>
<p></style></p>
<p> </p>
<p><div class="parent"></p>
<p>   <div class="child"></div></p>
<p></div></p>

通過設置父元素的 position 屬性為 relative，子元素的 height 屬性為 100%，我們可以使子元素的高度與父元素相同。這樣，子元素就能夠占滿父元素的高度了。
案例二： 在一些情況下，父元素的高度是由內部的內容撐開的，我們希望子元素能夠自適應父元素的高度。假設我們有一個父元素 <div>，內部有一些文本和圖片等內容，我們希望內部的子元素 <div> 的高度能夠自動適應父元素的高度。這個時候，我們可以通過如下代碼實現：

<p><style></p>
<p> .parent {</p>
<p>   background-color: gray;</p>
<p>   position: relative;</p>
<p>   overflow: hidden;</p>
<p> }</p>
<p> </p>
<p> .child {</p>
<p>   height: auto;</p>
<p>   background-color: red;</p>
<p> }</p>
<p></style></p>
<p> </p>
<p><div class="parent"></p>
<p>   <p>This is some text.</p></p>
<p>   <img src="image.jpg" alt="Image"></p>
<p>   <div class="child"></div></p>
<p></div></p>

通過設置父元素的 overflow 屬性為 hidden，子元素的 height 屬性為 auto，我們可以使子元素的高度自適應父元素的高度。這樣，子元素就能夠根據父元素內容的高度來自動調整自己的高度。
在使用 <div> 高度占滿的時候，還需要注意一些細節。比如，在沒有設置父元素的高度或者父元素的高度為 0 的情況下，子元素將無法正常占滿父元素的高度。 除了以上的幾種方法外，還可以通過使用 flex 布局、使用絕對定位等方式來實現 <div> 高度占滿的效果。具體的實現方式可以根據具體的布局需求來選擇。
一下，通過設置父元素的 position 屬性為 relative 或者使用 overflow 屬性為 hidden，再配合適當的高度設置，可以實現 <div> 高度占滿的效果，使網頁布局更加美觀和一致。希望本文對大家了解和使用 <div> 高度占滿有所幫助。