<div 撐起高度>是一種在網頁開發中常用的技術，它可以用來實現在沒有內容或動態改變的情況下撐起容器的高度。在很多情況下，頁面的布局會依賴于容器的高度，但是如果沒有足夠的內容來填充容器，就會出現高度不夠的問題。這時，我們可以使用<div>標簽以及一些CSS屬性來解決這個問題。在本文中，我們將通過幾個代碼案例詳細介紹如何使用<div 撐起高度>。

案例一：使用空白元素撐起<div>的高度。

<div class="container">
<div class="content">
這是一段內容。
這是另一段內容。
</div>
<div class="filler"></div>
</div>
<style>
.container {
position: relative;
border: 1px solid #000;
}
.content {
margin-bottom: 20px;
}
.filler {
height: 100%;
}
</style>
在這個案例中，我們使用了一個空白的<div>元素來撐起容器的高度。通過為.filler元素設置height: 100%的CSS屬性，它會自動填充剩余的空間，并使容器的高度與.content元素相等。這樣，即使.content元素中沒有足夠的內容，容器也會保持一定的高度。

案例二：使用偽元素撐起<div>的高度。
<div class="container">
<div class="content">
這是一段內容。
這是另一段內容。
</div>
</div>
<style>
.container {
position: relative;
border: 1px solid #000;
}
.content {
margin-bottom: 20px;
}
.container::after {
content: "";
display: table;
clear: both;
}
</style>
在這個案例中，我們使用了偽元素::after來撐起容器的高度。通過為.container元素添加::after偽元素，并設置clear: both的CSS屬性，它會在.container元素的內容下創建一個看不見的空白區域。這個空白區域會自動填充容器的剩余高度，保證容器的高度與.content元素相等。

案例三：使用flexbox布局撐起<div>的高度。
<div class="container">
<div class="content">
這是一段內容。
這是另一段內容。
</div>
</div>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 200px;
border: 1px solid #000;
}
.content {
margin-bottom: 20px;
}
</style>
在這個案例中，我們使用了flexbox布局來撐起容器的高度。通過為.container元素設置display: flex的CSS屬性，它的子元素會以彈性布局的方式排列。通過設置flex-direction: column和justify-content: space-between的CSS屬性，.content元素會自動填充剩余的空間，并撐起容器的高度。

以上是幾個使用<div 撐起高度>的案例，它們都能有效地解決容器高度不夠的問題。根據實際情況選擇合適的方法來實現，可以讓網頁布局更加靈活和美觀。