基于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包裹就实现了满屏。

效果图如下所示:

基于flex弹性布局实现“头尾固定,中间滚动”的页面_第1张图片

    头部和底部是被子元素撑开的,也可根据实际情况指定相应的高度,底部的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弹性布局实现“头尾固定,中间滚动”的页面_第2张图片

三、总结

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

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

 

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

 

 

 

 

 

        

 

你可能感兴趣的:(CSS布局)