本文详细讲解了如何使用Flex布局来创建一个页面，该页面具有固定的头部和底部，中间内容区域可滚动。通过设置html和body的高度为100%，最外层div为弹性布局，并调整其方向和高度，再为中间内容区域添加适当的样式，实现了在移动端的兼容性布局。在iOS设备上，由于滚动问题，推荐使用BScroll插件。
本文主要介绍了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部分：
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
