div 高度鋪滿是指讓一個div元素的高度能夠自動適應其內(nèi)部內(nèi)容的高度，并且將其余空白部分填充滿。在網(wǎng)頁布局中，通常會遇到需要將一個div元素的高度設置為自適應的情況，這時我們可以使用一些方法來實現(xiàn)該需求。

下面我將通過幾個代碼案例來詳細解釋如何實現(xiàn)div高度鋪滿。

案例一：使用display:flex

<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
<br>
    .content {
flex: 1;
background-color: #f0f0f0;
}
</style>
<div class="container">
<div class="content">
<!-- 內(nèi)容 -->
</div>
</div>

在這個案例中，我們將外部容器的高度設置為100vh（視窗高度），同時設置display:flex來啟用彈性布局。然后通過設置內(nèi)容區(qū)域的flex屬性為1，使其自動填充余下的空白區(qū)域，從而實現(xiàn)高度自適應的效果。

案例二：使用position:absolute和top/bottom屬性

<style>
.container {
position: relative;
height: 100vh;
}
<br>
    .content {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: #f0f0f0;
}
</style>
<div class="container">
<div class="content">
<!-- 內(nèi)容 -->
</div>
</div>

在這個案例中，我們使用了絕對定位的方式。通過將外部容器設置為position:relative，并設置其高度為100vh，使其在視窗中占滿一整個屏幕。接著，在內(nèi)容區(qū)域上設置position:absolute，然后通過設置top和bottom屬性值為0，使其相對于父容器的上下邊界進行定位，從而實現(xiàn)高度自適應的效果。

案例三：使用calc()函數(shù)

<style>
.container {
height: calc(100vh - 50px);
}
<br>
    .content {
height: 100%;
background-color: #f0f0f0;
}
</style>
<div class="container">
<div class="content">
<!-- 內(nèi)容 -->
</div>
</div>

在這個案例中，我們使用了CSS的calc()函數(shù)。通過將外部容器的高度設置為calc(100vh - 50px)，我們可以在計算高度時減去指定的像素值，從而實現(xiàn)高度自適應的效果。這里我們以視窗高度減去50像素作為示例，你可以根據(jù)實際情況進行調(diào)整。

這些是實現(xiàn)div高度鋪滿的幾個常見方法，你可以根據(jù)自己的需要選擇適合的方式來實現(xiàn)。希望本文能對你有所幫助！