<div>是HTML中最常用的標(biāo)簽之一，用于創(chuàng)建一個容器來包含其他HTML元素。通常情況下，<div>元素會根據(jù)內(nèi)部內(nèi)容的大小進(jìn)行自動調(diào)整高度。然而，有時候我們希望讓<div>元素的高度自動填充父元素的剩余空白空間，即讓<div>元素上下占滿整個父元素。本文將介紹幾種實現(xiàn)<div>上下占滿的方法，并給出相應(yīng)的代碼案例。
方法一：使用絕對定位
通過將<div>元素的定位設(shè)置為absolute，然后將top和bottom屬性都設(shè)置為0，即可實現(xiàn)上下占滿的效果。

<code>
div {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</code>

方法二：使用flexbox
使用flexbox布局可以輕松實現(xiàn)<div>上下占滿的效果。將父元素的display屬性設(shè)置為flex，并將flex-direction屬性設(shè)置為column，即可讓子元素按垂直方向排列。然后將子元素的flex屬性設(shè)置為1，即可讓子元素自動填充剩余空白空間。

<code>
.parent {
display: flex;
flex-direction: column;
}
<br>
    .child {
flex: 1;
}
</code>

方法三：使用grid
借助CSS grid布局，我們也可以實現(xiàn)<div>上下占滿的效果。將父元素的display屬性設(shè)置為grid，并將grid-template-rows屬性設(shè)置為"auto 1fr auto"，即可讓子元素自適應(yīng)父元素的高度。

<code>
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
<br>
    .child {
grid-row: 2 / span 1;
}
</code>

：
通過以上幾種方法，我們可以輕松實現(xiàn)<div>元素上下占滿的效果。使用絕對定位、flexbox布局或grid布局，都可以讓<div>元素自動填充父元素的剩余空白空間。根據(jù)具體情況選擇合適的方法，可以實現(xiàn)不同的布局需求。如需了解更多CSS布局技巧，請繼續(xù)關(guān)注我們的博客。