在網頁布局過程中，通常需要將元素占據屏幕剩余高度。CSS提供了多種實現方法，本文將介紹其中的一種——使用Flex布局。

首先，在使用Flex布局之前，需要設置html和body元素的height和min-height屬性為100%。

html,body{
height:100%;
min-height:100%;
}

接下來，將父元素的display屬性設置為flex，并設置flex-direction屬性為column。這樣，子元素就會在垂直方向上排列。

.parent{
display:flex;
flex-direction:column;
}

最后，在子元素中將需要占據屏幕剩余高度的元素的flex屬性設置為1，它將會占據剩余空間的大小。

.child{
flex:1;
}

完整的示例代碼如下：

html,body{
height:100%;
min-height:100%;
}
.parent{
display:flex;
flex-direction:column;
}
.header{
height:50px;
}
.content{
flex:1;
}
.footer{
height:50px;
}

通過以上代碼，header元素和footer元素的高度分別為50像素，而content元素則會占據屏幕剩余的高度。