<div 充滿剩余是一種常見的網(wǎng)頁布局技巧，可以使一個容器元素充滿剩余的寬度空間。通常情況下，如果一個容器元素沒有設置固定的寬度或者寬度為百分比，那么它的寬度會根據(jù)內(nèi)容自適應而不會充滿整個父容器的寬度。然而，有時我們希望一個容器元素可以充滿父容器的剩余寬度，這時就可以使用<div>元素來實現(xiàn)這一效果。
下面是幾個使用<div>元素充滿剩余寬度的示例：
示例一：

html
<style>
.parent {
width: 80%;
background-color: LightGray;
padding: 10px;
}
.child {
width: 100%;
background-color: DodgerBlue;
height: 50px;
}
</style>
<br>
<div class="parent">
<div class="child"></div>
</div>

在這個示例中，父容器使用了一個固定寬度的百分比（80%），內(nèi)部有一個寬度為100%的子容器。由于子容器的寬度設置為100%，它會自動充滿父容器的剩余寬度。
示例二：

html
<style>
.parent {
display: flex;
background-color: LightGray;
padding: 10px;
}
.child {
flex-grow: 1;
background-color: DodgerBlue;
height: 50px;
}
</style>
<br>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>

在這個示例中，父容器使用了flexbox布局，內(nèi)部有兩個具有相同類名的子容器。子容器使用了flex-grow屬性，值為1，表示它們均能充滿父容器的剩余寬度。因此，無論父容器的寬度是多少，子容器都會平均分配剩余的寬度空間。
示例三：

html
<style>
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: LightGray;
padding: 10px;
}
.child {
background-color: DodgerBlue;
height: 50px;
}
</style>
<br>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>

在這個示例中，父容器使用了grid布局，內(nèi)部有兩個具有相同類名的子容器。父容器的grid-template-columns屬性設置了兩個等分的列，子容器默認占據(jù)整個網(wǎng)格單元的寬度。因此，無論父容器的寬度是多少，子容器都會平均分配剩余的寬度空間。
<div>元素充滿剩余寬度可以通過多種方式實現(xiàn)，上述示例只是其中的幾個常見方式。這一技巧在實際的網(wǎng)頁布局中非常有用，能夠使頁面的元素更好地適應不同尺寸的屏幕。通過靈活運用<div>元素充滿剩余寬度的技巧，我們可以創(chuàng)建出更加美觀和響應式的網(wǎng)頁布局。