需求1：定欄，底欄，定高！主內容區域，左邊爛定寬， 右邊自適應，高度自適應。
(1)position （1） height: 100%;overflow: hidden; /*滾動條禁用*/
高度時100%，同時禁止滾動條。
（2）實現right內滾動，是使用在right內插入div.class='inner'，將此div，overflow設定為auto。
然後將其內部的inner的樣式設定為min-height = 1500px;這樣就有滾動條了。
相容性，出了ie6，其他都還好。
topleft
right
bottom
(2)flex首先讓parent成為布局的容器，
然後設定top和button是定高的，middle佔據剩餘的區域。
然後讓middle成為容器，將left定寬，right佔據剩餘的寬度。
注意在middle內flex並沒有設定方向，因為預設是水平方向。相容性，ie9以上！
topleft
right
bottom
需求2:定高和定寬，變為百分比。
將px－－》％
注意：定欄 和 底欄 都是佔據body的寬度的。
left的寬度也是寬度的百分比。
topleft
right
bottom
需求3 ：內容自適應，其他不變。
中間佔據剩餘空間，中間的右側佔據剩餘空間。
position，是不適合這樣的方式，只能用flex。
grid也可以，但是現在只是乙個草案。
實現就是將flex之前的所有的高度和寬度去掉，讓其自適應。
topleft
right
bottom
position，支援很好，效能較好。 但是自適應無法實現，
移動端使用flex很好。但移動端 效能比較差。可以實現完全自適應。
css 全屏布局解決方案
之前寫了幾個居中布局的例子，同時也提到了對於頁面的全屏布局。這裡詳細總結兩種常見的全屏布局的案例，當然，實際上還有像grid這樣的方案，但是因為目前還不穩定，只是作為w3c的乙個草案，相容性自然就差一些，這裡沒有作深入的 相信這樣的頁面布局，我們在很多後台系統上會經常用到 用 表示為這樣的結構 cl...
css 全屏布局
之前寫了幾個居中布局的例子，同時也提到了對於頁面的全屏布局。這裡詳細總結兩種常見的全屏布局的案例，當然，實際上還有像grid這樣的方案，但是因為目前還不穩定，只是作為w3c的乙個草案，相容性自然就差一些，這裡沒有作深入的 相信這樣的頁面布局，我們在很多後台系統上會經常用到 用 表示為這樣的結構 通常...
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 ...