頭尾固定，中間區域可以滑動效果是移動端最常見的效果，以京東頁面爲例。以前開發時常用的方法是用固定佈局
position:fixed;實現，但是該方法在ios上或者其他機型上會出現問題。現在，可以用flex方法快速實現該佈局。
html:
<body>
<div class="flex-wrap">
<div class="header">Header</div>
<div class="cont">
中間內容區域
</div>
<div class="footer">Footer</div>
</div>
</body>
css:
html,
body {
width: 100%;
height: 100%;
}
.flex-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.flex-wrap .header,
.flex-wrap .footer {
height: 40px;
background: lime;
}
.flex-wrap .cont {
flex: 1;
overflow: scroll;
background: red;
}
說明： css樣式中，一定要設置html,body以及最外層包裹容器的高度爲100%，同時中間內容區域的樣式一定要添加flex:1;
flex是flex-grow、flex-shrink、flex-basis的縮寫；
關於彈性佈局的具體用法可以參考文章：
https://www.html.cn/archives/7236
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
如有更好方法，歡迎大家留言，文章中有不足之處，歡迎大家指出。