資訊專欄INFORMATION COLUMN
摘要：之前寫了幾個居中布局的例子，同時也提到了對于頁面的全屏布局。列方向進行布局占據剩余區域核心思想就是不對部分設置具體的百分比。
之前寫了幾個居中布局的例子，同時也提到了對于頁面的全屏布局。這里詳細總結兩種常見的全屏布局的案例，當然，實際上還有像Grid這樣的方案，但是因為目前還不穩定，只是作為W3C的一個草案，兼容性自然就差一些，這里沒有作深入的探討。
相信這樣的頁面布局，我們在很多后臺系統上會經常用到：
用代碼表示為這樣的結構：
通常這種結構，我們使用比較多的是定位的方案，除此之外，還有一種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;}
當需要right的部分隨內容自適應，并且滾動條出現在該區域的話，可以在right中嵌套inner,
對inner設置個最小高度，并且為right部分增加
.right .inner{min-height:1000px;}
.right{overflow:auto;}
position的這種方案除了ie6外，兼容性非常好，并且對于ie6也有hack技術，比如 ie6下的hack
Flex在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 差 較好 可適應
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111244.html
CSS-Layout 旨在打造詳盡的前端布局代碼學習庫（自從用了框架開發，CSS生疏了不少，所以開這個庫練練手）SF不能正確解析含有中文的網址，所以某些預覽鏈接無法跳轉，請訪問我的博客閱讀此文 常見定位方法 水平居中 子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。 方案選擇基本思路：子元素為 行內元素：對父元素設置text-align:center; 定寬塊狀元素: 設...
摘要：將的高度設置成將會出現如下行為的高度被設置成了固定值，這意味著相對于高度的元素大小可能不正確對于應用程序所在設備是及更早的標簽將會被忽略以保證向后的兼容性不支持使用的布局寬度。 WebView 是一個顯示網頁內容的組件，可以顯示網絡上的一些在線內容并且可以作為 Web 瀏覽器滾動顯示的內容，它使用 WebKit作為渲染引擎來顯示網頁，里面包括放大、縮小、執行文本搜索等進行前后導航的方法...
閱讀 1437·2019-08-29 17:14
閱讀 1645·2019-08-29 12:12
閱讀 727·2019-08-29 11:33
閱讀 3261·2019-08-28 18:27
閱讀 1441·2019-08-26 10:19
閱讀 904·2019-08-23 18:18
閱讀 3524·2019-08-23 16:15
閱讀 2538·2019-08-23 14:14
