頁面佈局--上下固定中間自適應出現滾動條佈局

上下固定中間彈性滾動佈局是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佈局，可能也會有一些佈局問題，遇到在總結。

 

原文：https://blog.csdn.net/qq_26702033/article/details/79470661