<div> 垂直撐滿是指將一個 <div> 元素的高度設置為撐滿其父容器的高度。這在網頁設計中非常常見，特別是對于具有動態內容的元素。在這篇文章中，我們將討論如何使用 CSS 和幾個實例來實現 <div> 垂直撐滿效果。

CSS 中有幾種方法可以實現 <div> 垂直撐滿。一種常用的方法是使用 flexbox 布局。flexbox 是一種用于在容器中布局元素的 CSS 模塊。通過使用 flexbox，可以輕松地將子元素在容器中垂直居中，并且可以自動調整子元素的高度以撐滿容器。以下是一個使用 flexbox 的示例：

.parent {
display: flex;
align-items: stretch;
}

上面的代碼將 <div class="parent"> 容器中的子元素垂直居中，并且將其高度設置為撐滿容器的高度。這個方法非常簡單且易于理解，適用于大多數情況。

除了使用 flexbox，還可以使用其他方法來實現 <div> 垂直撐滿效果。一種方法是使用絕對定位。

.parent {
position: relative;
}
<br>
.child {
position: absolute;
top: 0;
bottom: 0;
}

上面的代碼將 <div class="child"> 元素的高度設置為 0 到父容器的底部，從而實現了垂直撐滿效果。這種方法適用于需要控制子元素位置的情況，但需要注意的是，父容器必須具有確定的高度，否則無法正確定位。

另一種實現 <div> 垂直撐滿效果的方法是使用 calc() 函數。

.parent {
height: calc(100vh - 100px);
}

上面的代碼將 <div class="parent"> 元素的高度設置為視窗高度減去 100px。這種方法適用于需要基于視窗高度來計算高度的情況，例如創建全屏的背景圖像。

最后，如果希望父容器的高度隨著內容的增加而自動撐開，可以通過設置高度為 auto 來實現。

.parent {
height: auto;
}

上述所有方法都可以幫助我們實現 <div> 垂直撐滿效果，具體的選擇取決于具體的需求和實際場景。通過靈活運用這些方法，可以輕松地在網頁設計中實現各種布局需求。

綜上所述，本文介紹了實現 <div> 垂直撐滿效果的幾種方法，包括使用 flexbox、絕對定位、calc() 函數和設置高度為 auto。通過靈活運用這些方法，我們可以輕松地在網頁設計中創建動態布局。