上下固定中间弹性滚动布局是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布局，可能也会有一些布局问题，遇到在总结。
如果觉得《页面布局--上下固定中间自适应出现滚动条布局》对你有帮助，请点赞、收藏，并留下你的观点哦！
