页面布局--上下固定中间自适应出现滚动条布局

上下固定中间弹性滚动布局是H5页面最常见的布局方法；现在总结了3中布局方式。

1.position:fixed+overflow:scroll+js动态设置中间高度

html代码：

//html结构
<nav></nav>
<div class="container" id="container">
<div class="inner">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
</div>
</div>
<footer></footer>

css代码：

html,body{
margin: 0;
padding: 0
}
nav{
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: red;
height: 40px;
}
.container{
width: 100%;
height: 400px;/* 需要设置确切的高度而不能设置100%，设置100%后的高度是内层容器的高度，就不能隐藏滚动条，所以不能写死高度，只能用js动态设置，所以没能用纯css处理 */
overflow-y: hidden;
overflow-x: hidden;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 40px;
}
.inner{
width: 120%;//可以用于不显示滚动条
height: 100%;
overflow-y: scroll;
}
.inner img{
display: block;
float: left;
margin: 0 auto;
}
footer{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: green;
height: 40px;
}

JavaScript代码
//需要设置container的高度才能起效
$(function () {
var clientHeight = $(document).height();
$(".container").height(clientHeight -80) ;
})

注意：

效果图：
- 要用JavaScript来设置中间弹性区域的高度，没有高度中间弹性区域会覆盖整个页面。
- 头部尾部设置position：fixed，中间部分的margin-top是头部的高度；margin-bottom是尾部的高度。

2.定义页面整体高度为100%，然后使用 position:absolute

---

html代码：

html结构：
<!--absolute布局 [[ -->
<div class="wrap">
<div class="header">header</div>
<div class="main">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
</div>
<div class="footer">footer</div>
</div>
<!--absolute布局 ]] -->

css代码：

css代码：
html,body{height:100%;margin: 0;padding: 0}
.wrap{width:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.header{position: absolute;top:0;left:0;width:100%;}
.footer{position: absolute;bottom:0;left:0;width:100%;}
.main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:102%;overflow: scroll;}

注意：

• 一定要设置html，body的height：100%；
• 中间的弹性区域设置overflow：scroll。

• 三个部分都是设置成position：absolute，中间部分的top是头部的高度；bottom是尾部的高度。

  效果：
  

3.flex布局

html代码：

html结构：
<div class="container">
<nav></nav>
<div class="main">
<div class="main_inner">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
<img src="01.jpg">
</div>
</div>
<footer></footer>
</div>

css代码：

html,body{height:100%;
margin: 0;
padding: 0}
.container{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
-moz-flex-direction:column;/* firefox */
-webkit-flex-direction:column;/* safair,opera,chorme */
flex-direction:column;
-webkit-box-orient:vertical;
-webkit-flex-wrap: nowrap; /*Safari,Opera,Chrome*/
flex-wrap: nowrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
width: 100%;
height: 100%
}
nav,div.main,footer{

}
nav{
background: red;
height: 40px;
}
footer{
background-color: green;
height: 40px;
}
.main{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
width:100%;
overflow:auto;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
.main_inner{
/* width: 110%; */
}
.main_inner img{
padding: 0;
margin: 0
}

效果：

总结：
3种方式的相同点：

* 都需要设置html，body的height：100%；
* 头部尾部的高度可以固定数值；
* 中间弹性部分设置overflow：scroll。

3中方式的不同点：

* 第一种方式要用js动态设置中间弹性部分的高度，否则内容超过容器高度时会覆盖头尾部分；
* 第二种方式是把头尾部都设置为position：absolute，这个可能会影响到内容的布局，如果出现布局问题尝试从这个方面寻找原因；
* 第三种方式使用了flex布局，可能也会有一些布局问题，遇到在总结。