html如下：

<div id="container">
    <div id="top"></div>
    <div id="center"></div>
    <div id="bottom"></div>
</div>

css如下：

*{
    margin: 0;
    padding: 0;
}
#container, body, html{
    height: 100%;
}
#container{
    display: flex; //彈性盒模型
    flex-direction
 
: column;//彈性盒模型預設水平分佈 column縱向分佈
}
#top, #bottom{
    height: 30px;
    background: #ff0000;
}
#center{
    flex-grow: 1; //中間內容佔的份數
    background: #CCCCCC;
}