<div>元素是HTML中的一個重要標簽，常用于創建網頁布局的容器。默認情況下，<div>元素的寬度會自動適應其內容的寬度，但是其高度卻并不會自動充滿父容器的高度。如果我們希望一個<div>元素垂直充滿其父容器，可以使用一些技巧和CSS屬性來實現這個效果。
，我們可以使用CSS的display屬性將<div>元素的display屬性設置為“flex”。這樣，<div>元素將以彈性布局的方式進行排列，其子元素可以自動填充空間。接下來，我們可以通過設置flex-grow屬性來控制子元素的擴展比例。如果我們將flex-grow屬性設置為1，表示子元素將以相等的比例擴展以填充剩余的空間。例如，下面的代碼將演示一個簡單的垂直充滿的<div>元素：

<style>
.container {
height: 500px;
display: flex;
flex-direction: column;
}
<br>
    .fill {
flex-grow: 1;
background-color: blue;
}
</style>
<br>
<div class="container">
<div class="fill"></div>
</div>

在上面的代碼中，我們創建了一個高度為500像素的父容器，并將其display屬性設置為“flex”。然后我們在父容器內部創建一個子元素，并將其flex-grow屬性設置為1。這樣，子元素將填充父容器中剩余的空間，并且背景顏色為藍色。運行代碼后，我們可以看到子元素垂直充滿了父容器。
除了使用flex布局，我們還可以使用CSS的絕對定位來實現<div>元素的垂直充滿。我們可以將父容器的position屬性設置為“relative”，然后將子元素的position屬性設置為“absolute”。接著，我們可以通過設置子元素的top、bottom、left、right屬性為0來將子元素限制在父容器的邊界內。例如，下面的代碼將演示這種方法：

<style>
.container {
height: 500px;
position: relative;
}
<br>
    .fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
}
</style>
<br>
<div class="container">
<div class="fill"></div>
</div>

在上面的代碼中，我們同樣創建了一個高度為500像素的父容器，并將其position屬性設置為“relative”。然后我們在父容器內部創建一個子元素，并將其position屬性設置為“absolute”，并設置top、bottom、left、right屬性為0。這樣，子元素將被限制在父容器的邊界內，并且背景顏色為藍色。運行代碼后，我們同樣可以看到子元素垂直充滿了父容器。
綜上所述，我們可以使用display屬性的“flex”值以及flex-grow屬性來實現<div>元素的垂直充滿。此外，我們還可以利用絕對定位的方法來實現相同的效果。通過應用這些技巧，我們可以更好地控制和布局網頁中的<div>元素。希望這篇文章對理解和應用<div>元素的垂直充滿有所幫助。