基于flex弹性布局实现“头尾固定，中间滚动”的页面

    最近，在写微信端购物商城的项目时，有遇到“头尾固定，中间滚动的”页面布局，基于现在很多购物类APP都是这种布局，在此记录一下。比如，淘宝的首页：

一、相关实例介绍

        头部搜索框和底部菜单栏的内容固定，中间区域部分的内容，随着游览的内容不断滚动，滚动的同时，也不会影响头部和尾部的位置，也不会遮盖住头部和尾部的内容。

        这种布局运用很多，有时候，会用fixed去做，但是很多手机适配有问题。改用弹性布局，在手机游览器中都是支持的。如果遇到的开发需求是单个H5页面，可以用CSS+HTML布局来实现。

二、运用的实例代码

	

		我是头部
	
	

		
abcd01
		
abcd02
		
abcd03
		
abcd04
		
abcd05
		
abcd06
		
abcd07
		
abcd08
		
abcd09
		
abcd10
		
abcd11
		
abcd12
		
abcd13
		
abcd14
		
abcd15
		
abcd16
		
abcd17
		
abcd18
		
abcd19
		
abcd20
		
abcd21
		
abcd22
		
abcd23
		
abcd24
		
abcd25
		
abcd26
		
abcd27
		
abcd28
		
abcd29
		
abcd30
		
abcd31
		
abcd32
		
abcd33
		
abcd34
		
abcd35
		
abcd36
	
	

		

			首页
			其他
			中心
		
	

    布局主要是三块，头部（header）、内容区（content）、脚部（footer），然后，被一个.page包裹就实现了满屏。

效果图如下所示：

    头部和底部是被子元素撑开的，也可根据实际情况指定相应的高度，底部的button是平均分布排列的（再添加几个也是），不用计算margin、padding以及position等，弹性布局很方便。

     再来个弹出层，一个基于头尾部固定的弹出层页面就实现了：

	

		
居中吧
	

/*弹出层样式（自动居中）*/
.layer-wraper{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(185,176,176,0.5);
	display:table;
	width:100%;
	height:100%;
	z-index:1000;
}
.layer-inside{
	display:table-cell;
	vertical-align:middle;
	color:#ffffff;
}

    使用table布局自动居中，并且这是使用fixed充满屏幕，这样一个半透明背景并且自动居中的弹出层样式就完成了，效果图如下：

三、总结

    如文章哪里有问题，欢迎大家留言进行指正，谢谢！

    参考博客：基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）点击打开链接

 

    版权声明：本文为博主原创文章，未经博主允许不得转载。