移動(dòng)端和pc端一樣整體上布局也可以分為上中下三部分孵淘，如圖：
一般來(lái)說(shuō),header和footer部分都為fixed定位，中間的內(nèi)容區(qū)域可滾動(dòng)违诗。
常規(guī)的結(jié)構(gòu)如下：
<header class="header fixed-top"></header>
<div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...
</div>
<footer class="footer fixed-bottom"></footer>
因?yàn)橐苿?dòng)端單頁(yè)面特性糟红，所以每個(gè)page為一個(gè)頁(yè)面吼肥，然后整體使用wrap-page包裹〉考慮到可滾動(dòng)的為page內(nèi)容撕阎，所以我們得給wrap-page一個(gè)具體的高度，然后使用原生的-webkit-overflow-scrolling:touch;來(lái)實(shí)現(xiàn)滾動(dòng)碌补，當(dāng)然對(duì)于不支持的虏束，也可以使用iscroll來(lái)兼容，而iscroll同樣也需要一個(gè)固定高度的容器來(lái)包裹可滾動(dòng)的內(nèi)容厦章。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body, .wrap-page {
height: 100%;
}
.wrap-page {
-webkit-overflow-scrolling: touch;
}
.fixed-top {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 960;
}
.fixed-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 940;
}
雖然header和footer部分采用了fixed定位镇匀，脫離了文檔流，但還是會(huì)擋住下面的內(nèi)容袜啃，所以有必要對(duì)wrap-page設(shè)置上下的padding間隔汗侵，以防止header和footer遮擋page內(nèi)容（假設(shè)header和footer高度各為44px）：
.wrap-page {
padding-top: 44px;
padding-bottom: 44px;
}
看起來(lái)不錯(cuò)，不過(guò)如果碰到有些頁(yè)面有header和footer群发，而有些頁(yè)面只有header晰韵，而有些甚至有兩個(gè)header部分，這么一刀切的方法顯然不合適熟妓。按照這個(gè)結(jié)構(gòu)只好通過(guò)js來(lái)給wrap-page添加不同的class來(lái)設(shè)置上下的padding宫屠。下面我們說(shuō)下另一種用css就能解決的方法。
優(yōu)化結(jié)構(gòu)
這次我們把footer提到wrap-page上面滑蚯，然后采用兄弟選擇器浪蹂，就可以解決剛才那個(gè)padding問(wèn)題，ratchet就是采用該方法（經(jīng)反饋告材，一些國(guó)產(chǎn)的安卓機(jī)對(duì)兄弟元素選擇器支持不太好坤次，所以這個(gè)方案適合高上大的玩，更新時(shí)間：2014-07-03）
<header class="header fixed-top"></header>
<footer class="footer fixed-bottom"></footer>
<div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...
</div>
這樣我們就可以采用兄弟選擇器斥赋，設(shè)置上下的padding：
.header ~ .wrap-page {
padding-top: 44px;
}
.footer ~ .wrap-page {
padding-bottom: 44px;
}
同樣如果有二層header部分（如搜索框）：
<header class="header fixed-top"></header>
<section class="header-sub"></section>
<footer class="footer fixed-bottom"></footer>
<div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...
</div>
還是采用兄弟選擇器缰猴，將wrap-page的padding-top設(shè)置為header的高度加上header-sub的高度：
.header-sub ~ .wrap-page {
padding-top: 88px;
}
看起來(lái)不錯(cuò)，再也不用通過(guò)js來(lái)判斷對(duì)wrap-page增刪class了疤剑。
不過(guò)這個(gè)也同樣有個(gè)問(wèn)題滑绒，為了說(shuō)明這個(gè)問(wèn)題闷堡，我們還是回到移動(dòng)端單頁(yè)面特性這個(gè)上面，我們的頁(yè)面是通過(guò)page的形式添加到wrap-page這個(gè)包裹上的疑故，每次只顯示一個(gè)而已杠览。
<div class="wrap-page">
<section class="page"></section>
<section class="page" style="display:none;"></section>
<section class="page" style="display:none;"></section>
...
</div>
當(dāng)然每個(gè)頁(yè)面不可能只有content部分，也會(huì)有header和footer纵势，不同頁(yè)面存在不同的header或footer這是絕對(duì)可能的踱阿。那么如果header和footer部分也通過(guò)這種顯示隱藏的方式來(lái)搞呢？
如：我們從一個(gè)有header和footer的頁(yè)面钦铁，切換到一個(gè)只有header的頁(yè)面软舌，且header改變，就會(huì)成為下面這樣：
<header class="header fixed-top" style="display:none;"></header>
<header class="header fixed-top"></header>
<footer class="footer fixed-bottom" style="display:none;"></footer>
這樣雖然footer隱藏了牛曹，但是對(duì)于下面這條樣式同樣還是會(huì)解析生效佛点，wrap-page會(huì)有44px的padding-bottom
.footer ~ .wrap-page {
padding-bottom: 44px;
}
所以如果我們采用這種布局，header和footer絕對(duì)不能采用顯示顯示隱藏的方式來(lái)搞黎比，而應(yīng)該采用替換形式超营，沒(méi)有則刪除。具體可以參考ratchet的實(shí)現(xiàn)方式
絕對(duì)定位布局
直接參考demo焰手，關(guān)鍵在于設(shè)置wrap-page的top糟描，bottom的距離為header和footer的高度。
css代碼如下：
.header,.footer,.wrap-page{
position:absolute;
left:0;
right:0;
}
.header,.footer{
height:44px;
background-color: #fff;
text-align: center;
z-index:900;
line-height:44px;
}
.header{
top: 0;
border-bottom: 1px solid #f00;
}
.footer{
bottom: 0;
border-top: 1px solid #f00;
}
.wrap-page{
top: 44px;
bottom: 44px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.page{
padding: 10px;
}
.page p{
margin-bottom: 10px;
}
這個(gè)布局的缺陷在于滾動(dòng)的時(shí)候地址欄不隱藏书妻，safari瀏覽器可以通過(guò)下面js代碼來(lái)隱藏地址欄船响，其他瀏覽器經(jīng)測(cè)試不可以
window.addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
如果你實(shí)在要除掉瀏覽器的地址欄和工具欄，可以設(shè)置meta標(biāo)簽為應(yīng)用模式躲履，參考新建空白頁(yè)面的其他meta部分
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
flex 布局
可以通過(guò)這個(gè)簡(jiǎn)單的demo來(lái)測(cè)試：flex layout demo
設(shè)置body為flex布局见间，方向?yàn)榇怪狈较颍瑆rap-page的flex為1工猜。這個(gè)跟上面的絕對(duì)定位一樣米诉，還是滾動(dòng)的時(shí)候地址欄不隱藏，safari同樣可以通過(guò)js來(lái)搞定篷帅，其他瀏覽器不可以
body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.wrap-page {
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.header,.footer{
height:44px;
background-color: #fff;
text-align: center;
line-height:44px;
position:relative;
z-index:990;
}
.header{
border-bottom: 1px solid #f00;
}
.footer{
border-top: 1px solid #f00;
}
.wrap-page{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.page{
padding: 10px;
}
.page p{
margin-bottom: 10px;
}
總結(jié)
- 因?yàn)閒ixed定位史侣，滾動(dòng)的時(shí)候bug太多，特別是有表單元素的時(shí)候得慎用魏身；
- 而flex布局兼容方面有一定問(wèn)題惊橱，好像性能也不是很好，況且如果是在body下面直接布局的話箭昵，只有上中下這幾個(gè)元素還好税朴，如果再添加上彈窗，panel什么的子元素搞不好還有問(wèn)題得深入；
- -所以選擇絕對(duì)定位相對(duì)來(lái)說(shuō)還是比較靠譜的正林。而優(yōu)化的元素位置關(guān)系泡一，因?yàn)閲?guó)產(chǎn)的安卓手機(jī)太多，有些還不太支持觅廓，再加上隱藏的元素選擇器還有效鼻忠，所以暫時(shí)不考慮。
