本文主要介绍了flex布局实现上下固定中间滑动的布局方式,分享给大家,具体如下:
例如这样的一个页面,希望有个头图,有个底部的底栏,中部内容区域可滑动。
简单介绍一下如何实现
固定头部和尾部,中间部分可滑动,使用flex布局
1.设置html,body高度为100%
2.设置最外层div的布局方式为弹性布局display:flex;
3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向,起点在上沿
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
colum
1