利用display:flex; 实现三行布局，头尾固定，中间自适应

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; }