CSS占剩余高度是一個常見的網頁布局技巧，它可以讓元素在頁面中垂直居中或者與其他元素分割出一個比例合適的空間。在CSS中，我們可以用一些屬性來實現這種占剩余高度的布局效果。

首先，我們可以使用height:100%，使元素的高度和其父元素的高度一致。但是這種方式無法實現實現占剩余高度的效果，因為元素的高度已經確定，它無法自適應剩余的空間。

我們可以使用另外兩個CSS屬性：position:absolute和top:0，它們可以使一個元素占據下面所有剩余的空間。這可以讓一個元素跨越整個頁面。

但是這種方式有些缺點，因為當用戶滾動頁面時，該元素將始終位于頁面頂部。為此，我們可以使用calc()函數來計算元素的高度。例如，calc(100% - 50px)可以讓元素高度為其父容器高度減去50像素高度。

最后，我們還可以借助 Flexbox 布局，使用flex: 1，讓元素占據其父元素的所有剩余空間。這實現起來簡單，而且非常直觀。然而，要在所有瀏覽器中正確運行，我們可能還需要做一些額外的工作，例如給舊版瀏覽器添加一些瀏覽器特定的前綴。

.container {
height: 100vh; /*設置容器高度為整個視口高度*/
display: flex; /*使用flex布局*/
}
.item {
flex: 1; /*將元素占據其父元素的所有剩余空間*/
}