<div height沾滿是指一個HTML元素（如div）的高度能夠完全填充其父元素的高度。通常情況下，一個div元素的高度默認是由其內部內容的大小來決定的，但有時候我們希望讓它的高度自動沾滿父元素的高度，無論父元素的高度如何變化。在本文中，我們將使用幾個代碼案例來詳細解釋如何實現div height沾滿的效果。
在第一個案例中，我們將介紹如何使用CSS的height屬性來實現div height沾滿的效果。通過將height屬性的值設置為100%，我們可以確保div元素的高度始終與其父元素的高度相同。以下是一個示例代碼：

<code>
<p><style></p>
<p>  .parent {</p>
<p>    height: 200px;</p>
<p>    background-color: lightblue;</p>
<p>  }</p>
<p>  .child {</p>
<p>    height: 100%;</p>
<p>    background-color: lightgreen;</p>
<p>  }</p>
<p></style></p>
<p><div class="parent"></p>
<p>  <div class="child">This is a child div.</div></p>
<p></div></p>
</code>

在上面的代碼中，我們創建了一個名為parent的div元素，并將其高度設置為200px，背景顏色設置為淺藍色。然后，我們在父元素內部創建了一個名為child的div元素，并將其高度設置為100%，背景顏色設置為淺綠色。這樣，child元素的高度將沾滿parent元素的高度。
在第二個案例中，我們將介紹如何使用CSS的flexbox布局來實現div height沾滿的效果。通過將父元素的display屬性設置為flex，并將flex-direction屬性設置為column，我們可以讓子元素自動填充父元素的高度。以下是一個示例代碼：

<code>
<p><style></p>
<p>  .parent {</p>
<p>    height: 200px;</p>
<p>    display: flex;</p>
<p>    flex-direction: column;</p>
<p>    background-color: lightblue;</p>
<p>  }</p>
<p>  .child {</p>
<p>    flex-grow: 1;</p>
<p>    background-color: lightgreen;</p>
<p>  }</p>
<p></style></p>
<p><div class="parent"></p>
<p>  <div class="child">This is a child div.</div></p>
<p></div></p>
</code>

在上面的代碼中，我們將父元素的display屬性設置為flex，flex-direction屬性設置為column，并將子元素的flex-grow屬性設置為1。這樣，子元素將自動填充父元素的剩余空間，從而實現了div height沾滿的效果。
一下，在本文中我們通過使用CSS的height屬性和flexbox布局來實現了div height沾滿的效果。無論是通過將height屬性的值設置為100%還是使用flexbox布局，我們都能夠讓div元素的高度自動沾滿其父元素的高度。希望本文能夠幫助您理解并實現div height沾滿的效果。