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

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

一、相关实例介绍

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

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

二、运用的实例代码

<body>
<section class="page">
	<header class="header">
		我是头部
	</header>
	<section class="content">
		<div>abcd01</div>
		<div>abcd02</div>
		<div>abcd03</div>
		<div>abcd04</div>
		<div>abcd05</div>
		<div>abcd06</div>
		<div>abcd07</div>
		<div>abcd08</div>
		<div>abcd09</div>
		<div>abcd10</div>
		<div>abcd11</div>
		<div>abcd12</div>
		<div>abcd13</div>
		<div>abcd14</div>
		<div>abcd15</div>
		<div>abcd16</div>
		<div>abcd17</div>
		<div>abcd18</div>
		<div>abcd19</div>
		<div>abcd20</div>
		<div>abcd21</div>
		<div>abcd22</div>
		<div>abcd23</div>
		<div>abcd24</div>
		<div>abcd25</div>
		<div>abcd26</div>
		<div>abcd27</div>
		<div>abcd28</div>
		<div>abcd29</div>
		<div>abcd30</div>
		<div>abcd31</div>
		<div>abcd32</div>
		<div>abcd33</div>
		<div>abcd34</div>
		<div>abcd35</div>
		<div>abcd36</div>
	</section>
	<footer class="footer">
		<nav class="foot-nav">
			<b>首页</b>
			<b>其他</b>
			<b>中心</b>
		</nav>
	</footer>
</section>
</body>

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

<style>
/*清除手机的一些基本样式*/
html{
	font-size:62.5%;
	width:100%;
	height:100%;
	-webkit-font-smoothing:antialiased;
}
body{
	text-align:center;
	-webkit-user-select:none;
	width:100%;
	height:100%;
	background:#fff;
	font-size:1.2rem;
	color:#000;
	font-family:"Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;
	-webkit-text-size-adjust:none;
}
*{
	margin:0;
	padding:0;
	list-style:none;
}
i,em,b{
	font-style:normal;
	font-weight:normal;
}
:-moz-placeholder{color:#ccc;}
::-moz-placeholder{color:#ccc;}
::-webkit-textarea-placeholder{color:#ccc;}
:-ms-textarea-placeholder{color:#ccc;}
img{
	width:100%;
	vertical-align:top;
}
input,textarea,select{
	-webkit-appearance:none;
	font-size:1.2rem;
	border:0;
	background:transparent;
	font-family:"黑体","Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;
}
input,a,span{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

/*flex最外框*/
.page{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	height:100%;
}
/*flex内容区*/
.page .content{
	position:relative;
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	background-color:#ccc;
}
/*flex头部*/
.header{
	display:-webkit-box;
}
.header *{
	display:block;
}
/*flex底部，按钮平均分布*/
.footer{
	overflow:hidden;
	background:#fff;
}
.foot-nav{
	display:-webkit-box;
	height:2rem;
	line-height:2rem;
}
.foot-nav *{
	display:block;
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}
</style>

效果图如下所示：

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

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

<div class="layer-wraper">
	<div class="layer-inside">
		<p>居中吧</p>
	</div>
</div>

/*弹出层样式（自动居中）*/
.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实现）点击打开链接

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

猜你喜欢