css 全屏布局

2021-09-19 17:09:08 字數 1530 閱讀 5119

之前寫了幾個居中布局的例子，同時也提到了對於頁面的全屏布局。這裡詳細總結兩種常見的全屏布局的案例，當然，實際上還有像grid這樣的方案，但是因為目前還不穩定，只是作為w3c的乙個草案，相容性自然就差一些，這裡沒有作深入的**。

相信這樣的頁面布局，我們在很多後台系統上會經常用到：

用**表示為這樣的結構：
通常這種結構，我們使用比較多的是定位的方案，除此之外，還有一種flex方案。

html,body,.parent


.top


.left


.right


.bottom
當需要right的部分隨內容自適應，並且滾動條出現在該區域的話，可以在right中巢狀inner,
對inner設定個最小高度，並且為right部分增加

.right .inner


.right
position的這種方案除了ie6外，相容性非常好，並且對於ie6也有hack技術，比如 ie6下的hack
在left,和right外層包了一層middle。

.parent//列方向進行布局


.top


.bottom


.middle//佔據剩餘區域
中間部分：

.middle //作為乙個容器，這裡預設的，flex-direction:row


.left


.right
對於right中如果加滾動條的話，做法同前。

flex的相容性，對ie9以下不太好，並且flex本身效能不是很好，在手機上尤其如此。

如果對於上例中的定高，定寬的部分，即px換成%,top的10%相對於body。這種情形的話，上面講的兩種方案同樣能夠實現。**中的px替換成%即可。

考慮如下三種方案

首先，定位方案肯定是不合適的，因為px的設定就違背了根據內容自適應的思想。

另外，grid就像開頭將的，用的比較少。

重點考慮flex方案。

.parent//列方向進行布局


.middle//佔據剩餘區域


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

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

相容性   效能       自適應


position 好 好 部分自適應


flex 較差 手機尤其 可自適應


grid 差 較好 可適應

mysql cmd全屏 CSS全屏布局的5種方式

思路一 float float calc 通過calc 函式計算出.middle元素的高度，並設定子元素高度為100 overflow hidden height calc 100 100px left.right.right in.top,bottom top left right bottom ...

css 全屏布局解決方案

之前寫了幾個居中布局的例子，同時也提到了對於頁面的全屏布局。這裡詳細總結兩種常見的全屏布局的案例，當然，實際上還有像grid這樣的方案，但是因為目前還不穩定，只是作為w3c的乙個草案，相容性自然就差一些，這裡沒有作深入的 相信這樣的頁面布局，我們在很多後台系統上會經常用到 用 表示為這樣的結構 cl...

解決 全屏 布局

需求1 定欄，底欄，定高！主內容區域，左邊爛定寬，右邊自適應，高度自適應。1 position 1 height 100 overflow hidden 滾動條禁用 高度時100 同時禁止滾動條。2 實現right內滾動，是使用在right內插入div.class inner 將此div，overf...