在CSS中，我們經常需要設置元素的高度以適應頁面布局。有時候，我們需要讓一個元素的高度填充剩下的空間，以便我們可以得到一個整潔的頁面布局。這篇文章將介紹一些方法來實現這種布局。

/* 第一種方法：使用絕對定位 */
.container {
position: relative;
width: 100%;
height: 100%;
}
.fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* 第二種方法：使用flex布局 */
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.fill {
flex: 1;
}
/* 第三種方法：使用grid布局 */
.container {
display: grid;
grid-template-rows: 1fr auto;
height: 100%;
}
.fill {
grid-row: 1 / span 1;
}

以上三種方法都可以讓一個元素的高度充滿剩下的空間。第一種方法使用絕對定位，設置元素的上下左右邊距為0，從而使元素的高度填充整個容器。第二種方法使用flex布局，將元素的flex值設置為1，使它在其父元素中占據所有可用空間。第三種方法使用grid布局，將容器分成兩個行，第一行使用1fr代表剩余空間，第二行放置其他元素。

無論使用哪種方法，都可以讓一個元素的高度填滿剩下的空間。根據實際需求，可以選擇適合自己的方法。