在頁面設計時，往往需要讓某個元素占滿剩余的空間，這時候就需要使用CSS來實現。在CSS中，有多種方式可以實現元素撐滿剩余的高度，可以使用定位、彈性布局、表格布局等方式。本文將介紹常見的實現方式。

使用絕對定位實現

.parent {
 position: relative;
 height: 300px;
}
.child {
 position: absolute;
 top: 0;
 bottom: 0;
}

這種方式需要在父元素上設置相對定位，子元素使用絕對定位，并設置top和bottom為0，即可占據父元素的剩余高度。需要注意的是，在使用絕對定位時，如果父元素的高度無法確定，可能會導致撐不滿的問題，需要結合實際情況進行調整。

使用彈性布局實現

.parent {
 display: flex;
 flex-direction: column;
 height: 300px;
}
.child {
 flex: 1;
}

彈性布局是CSS3新增的一種布局方式，可以很好地解決元素撐滿高度的問題。在父元素上使用display:flex，設置flex-direction為column，即可將子元素垂直排列。子元素使用flex:1，即可占據父元素的剩余高度。

使用表格布局實現

.parent {
 display: table;
 height: 300px;
}
.child {
 display: table-row;
 height: 100%;
}

表格布局也可以實現元素撐滿高度的效果。在父元素上使用display:table，子元素使用display:table-row，并設置高度為100%，即可占據父元素的剩余高度。需要注意的是，表格布局的使用需要考慮兼容性問題。