<div>填滿高度</div>是一個常見的網頁布局需求。在網頁設計中，有時候我們希望一個<div>元素可以自動填滿其父元素的高度。這在實現一些常見的布局效果時特別有用，比如固定頂部和底部的導航欄，或者兩個側邊欄加上一個中間內容區域的布局。然而，<div>元素默認是不會自動填滿其父元素的高度的。本文將介紹幾種方法來實現<div>填滿高度的效果。
第一種方法是使用CSS Flexbox布局。Flexbox是CSS3的一種布局模型，用于在一維空間內對元素進行對齊、排序和分布等操作。通過設置父元素的display屬性為flex，我們可以輕松實現子元素的自動填滿父元素的高度。下面是一個示例代碼：

<style>
.container {
display: flex;
flex-direction: column;
}
<br>
  .content {
flex: 1;
}
</style>
<br>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>

在上面的代碼中，.container元素被設置為flex布局，并且設置了flex-direction屬性為column，表示子元素在垂直方向上排列。.content元素的flex屬性被設置為1，表示它會占據剩余的空間，從而自動填滿父元素的高度。
第二種方法是使用CSS Grid布局。Grid布局是CSS3的另一種強大的布局模型，可以用于在二維空間內對元素進行布局。通過將父元素的display屬性設置為grid，并使用grid-template-rows屬性設置行高來實現子元素的自動填滿父元素的高度。下面是一個示例代碼：

<style>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
}
<br>
  .content {
grid-row: 2;
}
</style>
<br>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>

在上面的代碼中，.container元素被設置為grid布局，并使用grid-template-rows屬性設置了三行，分別為自適應高度的header和footer，以及占據剩余空間的content。
第三種方法是使用CSS calc()函數結合絕對定位。通過在父元素和子元素之間使用絕對定位，并利用calc()函數來計算子元素的高度，可以實現子元素的自動填滿父元素的高度。下面是一個示例代碼：

<style>
.container {
position: relative;
height: 200px;
}
<br>
  .content {
position: absolute;
top: 0;
bottom: 0;
height: calc(100% - 40px); /* 40px是header和footer的高度之和 */
}
</style>
<br>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>

在上面的代碼中，.container元素被設置為相對定位，.content元素被設置為絕對定位，并通過top和bottom屬性來拉伸其高度。通過使用calc()函數，我們可以計算.content元素的高度為100%減去header和footer的高度之和，從而實現子元素的自動填滿父元素的高度。
通過以上幾種方法，我們可以輕松地實現<div>填滿高度的效果。無論是使用Flexbox布局、Grid布局還是絕對定位，我們都可以根據具體的布局需求選擇合適的方法來實現。<div>填滿高度的效果對于網頁布局來說非常重要，能夠讓我們實現更加靈活多樣的布局效果，提升用戶體驗。希望本文能對大家在實現<div>填滿高度方面提供一些幫助。