資訊專欄INFORMATION COLUMN
摘要：之前寫了幾個居中布局的例子，同時也提到了對于頁面的全屏布局。列方向進行布局占據(jù)剩余區(qū)域核心思想就是不對部分設(shè)置具體的百分比。
之前寫了幾個居中布局的例子，同時也提到了對于頁面的全屏布局。這里詳細總結(jié)兩種常見的全屏布局的案例，當(dāng)然，實際上還有像Grid這樣的方案，但是因為目前還不穩(wěn)定，只是作為W3C的一個草案，兼容性自然就差一些，這里沒有作深入的探討。
相信這樣的頁面布局，我們在很多后臺系統(tǒng)上會經(jīng)常用到：
用代碼表示為這樣的結(jié)構(gòu)：
通常這種結(jié)構(gòu)，我們使用比較多的是定位的方案，除此之外，還有一種Flex方案。
Positionhtml,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;}
當(dāng)需要right的部分隨內(nèi)容自適應(yīng)，并且滾動條出現(xiàn)在該區(qū)域的話，可以在right中嵌套inner,
對inner設(shè)置個最小高度，并且為right部分增加
.right .inner{min-height:1000px;}
.right{overflow:auto;}
position的這種方案除了ie6外，兼容性非常好，并且對于ie6也有hack技術(shù)，比如 ie6下的hack
Flex在left,和right外層包了一層middle。
.parent{display:flex;flex-direction:column;}//列方向進行布局
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;}//占據(jù)剩余區(qū)域
中間部分：
.middle{flex:1;display:flex;} //作為一個容器，這里默認的，flex-direction:row
.left{width:200px;}
.right{flex:1;}
對于right中如果加滾動條的話，做法同前。
flex的兼容性，對ie9以下不太好，并且flex本身性能不是很好，在手機上尤其如此。
如果對于上例中的定高，定寬的部分，即px換成%,top的10%相對于body。這種情形的話，上面講的兩種方案同樣能夠?qū)崿F(xiàn)。代碼中的px替換成%即可。
定寬后者定高的部分換成根據(jù)內(nèi)容自適應(yīng)考慮如下三種方案
Position
Flex
Grid
首先，定位方案肯定是不合適的，因為px的設(shè)置就違背了根據(jù)內(nèi)容自適應(yīng)的思想。
另外，Grid就像開頭將的，用的比較少。
重點考慮Flex方案。
.parent{display:flex;flex-direction:column;}//列方向進行布局
.middle{flex:1;display:flex;}//占據(jù)剩余區(qū)域
.right{flex:1;}
核心思想就是不對top,bottom,left部分設(shè)置具體的百分比。
對比總結(jié)從兼容性，性能，自適應(yīng)方面考慮，
兼容性 性能 自適應(yīng)
Position 好 好 部分自適應(yīng)
Flex 較差 手機尤其 可自適應(yīng)
Grid 差 較好 可適應(yīng)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111244.html
CSS-Layout 旨在打造詳盡的前端布局代碼學(xué)習(xí)庫（自從用了框架開發(fā)，CSS生疏了不少，所以開這個庫練練手）SF不能正確解析含有中文的網(wǎng)址，所以某些預(yù)覽鏈接無法跳轉(zhuǎn)，請訪問我的博客閱讀此文 常見定位方法 水平居中 子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。 方案選擇基本思路：子元素為 行內(nèi)元素：對父元素設(shè)置text-align:center; 定寬塊狀元素: 設(shè)...
摘要：將的高度設(shè)置成將會出現(xiàn)如下行為的高度被設(shè)置成了固定值，這意味著相對于高度的元素大小可能不正確對于應(yīng)用程序所在設(shè)備是及更早的標(biāo)簽將會被忽略以保證向后的兼容性不支持使用的布局寬度。 WebView 是一個顯示網(wǎng)頁內(nèi)容的組件，可以顯示網(wǎng)絡(luò)上的一些在線內(nèi)容并且可以作為 Web 瀏覽器滾動顯示的內(nèi)容，它使用 WebKit作為渲染引擎來顯示網(wǎng)頁，里面包括放大、縮小、執(zhí)行文本搜索等進行前后導(dǎo)航的方法...
閱讀 1456·2019-08-29 17:14
閱讀 1655·2019-08-29 12:12
閱讀 738·2019-08-29 11:33
閱讀 3273·2019-08-28 18:27
閱讀 1449·2019-08-26 10:19
閱讀 912·2019-08-23 18:18
閱讀 3534·2019-08-23 16:15
閱讀 2547·2019-08-23 14:14
