div 高度撐滿指的是讓一個div元素的高度自動撐滿其包含的內容，即使內容的高度發生變化，div也能夠自動適應其大小。這是一個常見的布局需求，特別是當我們需要創建一個類似于網頁的頁面布局時。在本文中，我將通過幾個代碼案例來詳細解釋div高度撐滿的方法，并參考一些真實案例來幫助理解。
在開始之前，先來看一下如何使用CSS來設置div高度撐滿的基本方法。通常，我們可以使用以下兩種方式來實現這一效果：
1. 使用CSS的height屬性將div的高度設置為100%。這種方法要求父級元素的高度已經被設置為一個固定值（例如，像素或百分比）。下面是一個簡單的示例代碼：

<style>
.container {
height: 500px;
}
<br>
    .content {
height: 100%;
}
</style>
<br>
<div class="container">
<div class="content">這是一個div元素</div>
</div>

2. 使用CSS的position屬性將div的定位類型設置為絕對定位，并使用top、bottom、left和right屬性來設置其位置。下面是一個簡單的示例代碼：

<style>
.container {
position: relative;
}
<br>
    .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<br>
<div class="container">
<div class="content">這是一個div元素</div>
</div>

這兩種方法都可以實現div高度撐滿的效果，具體使用哪種方法取決于你的布局需求和父級元素的結構。
接下來，讓我們參考一些真實案例來進一步理解這些方法。以下是一個常見的網頁布局中使用div高度撐滿的示例代碼：

<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<br>
    .header {
height: 50px;
background-color: #f2f2f2;
}
<br>
    .content {
height: calc(100% - 50px);
background-color: #eaeaea;
}
<br>
    .footer {
height: 30px;
background-color: #f2f2f2;
}
</style>
<br>
<div class="header">頭部</div>
<div class="content">內容</div>
<div class="footer">底部</div>

在這個例子中，我們設置了html和body元素的高度為100%，以確保整個頁面的高度能夠撐滿瀏覽器窗口。然后，我們分別設置了header、content和footer的高度，以實現一個簡單的上、中、下布局。
在content元素中，我們使用了calc()函數來計算其高度。這里我們將整個頁面的高度減去header和footer的高度，以確保content的高度自動適應剩余的空間。
通過這個例子，我們可以看到如何使用div高度撐滿來創建網頁布局，其中div元素的高度根據內容的變化而自動適應。
起來，使用div的高度撐滿是實現各種布局需求的重要技術。無論是簡單的上、中、下布局，還是復雜的網頁布局，在合適的情況下，我們可以使用CSS的height屬性或position屬性來實現div高度自動撐滿的效果。通過使用一些真實案例的參考，我們可以更好地理解這些方法的應用。希望本文能對你理解div高度撐滿有所幫助。