css--全屏佈局

以前寫了幾個居中佈局的例子，同時也提到了對於頁面的全屏佈局。這裏詳細總結兩種常見的全屏佈局的案例，固然，實際上還有像Grid這樣的方案，可是由於目前還不穩定，只是做爲W3C的一個草案，兼容性天然就差一些，這裏沒有做深刻的探討。

相信這樣的頁面佈局，咱們在不少後臺系統上會常常用到：
用代碼表示爲這樣的結構：

<div class="parent">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>

一般這種結構，咱們使用比較多的是定位的方案，除此以外，還有一種Flex方案。

Position

html,body,.parent{height:100%;overflow:hidden;}
.top{position:absolute;top:0;left:0;right:0;height:100px;}
.left{position:absolute;left:0;top:100px;bottom:50px;width:200px;}
.right{position:absolute;left:200px;right:0;top:100px;bottom:50px;}
.bottom{position:absoulte;left:0;right:0;bottom:0;height:50px;}

當須要right的部分隨內容自適應，而且滾動條出如今該區域的話，能夠在right中嵌套inner,

<div calss="right">
    <div class="inner">
    </div>
</div>

對inner設置個最小高度，而且爲right部分增長

.right .inner{min-height:1000px;}
.right{overflow:auto;}

position的這種方案除了ie6外，兼容性很是好，而且對於ie6也有hack技術，好比 ie6下的hack

Flex

<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</div>

在left,和right外層包了一層middle。

.parent{display:flex;flex-direction:column;}//列方向進行佈局
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;}//佔據剩餘區域

中間部分：

.middle{flex:1;display:flex;} //做爲一個容器，這裏默認的，flex-direction:row
.left{width:200px;}
.right{flex:1;}

對於right中若是加滾動條的話，作法同前。
flex的兼容性，對ie9如下不太好，而且flex自己性能不是很好，在手機上尤爲如此。

定高定寬的部分換成定百分比

若是對於上例中的定高，定寬的部分，即px換成%,top的10%相對於body。這種情形的話，上面講的兩種方案一樣可以實現。代碼中的px替換成%便可。

定寬後者定高的部分換成根據內容自適應

考慮以下三種方案

• Position

• Flex

• Grid

首先，定位方案確定是不合適的，由於px的設置就違背了根據內容自適應的思想。
另外，Grid就像開頭將的，用的比較少。
重點考慮Flex方案。

.parent{display:flex;flex-direction:column;}//列方向進行佈局
.middle{flex:1;display:flex;}//佔據剩餘區域
.right{flex:1;}

核心思想就是不對top,bottom,left部分設置具體的百分比。

對比總結

從兼容性，性能，自適應方面考慮，

兼容性   性能       自適應
Position   好      好       部分自適應
Flex       較差   手機尤爲   可自適應
Grid       差     較好      可適應