flex布局实现上下固定中间滑动的布局方式

本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下:

例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。

简单介绍一下如何实现

固定头部和尾部，中间部分可滑动，使用flex布局
1.设置html，body高度为100%
2.设置最外层div的布局方式为弹性布局display:flex;
3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
4.设置最外层div的高度为100%
5.正常写头部样式
6.正常写尾部样式
7.中间样式为flex: 1;overflow: hidden或者overflow:auto;-webkit-overflow-scrolling: touch后者在ios手机中滑动会有问题，建议使用插件

html部分：

    

      
%20%20%20%20
%20%20%20%20
%20%20%20%20%20%20
%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20