常用一屏自適應布局（一）
阿新 • • 發佈：2018-12-07
多說 width pos back 代碼 解析 col wid center
在web開發的時候，有時候會遇見一些自適應布局，而且是一屏內自適應，特別是寫一些後臺管理系統界面，都是一屏顯示，而且顯示內容布局有固定的，也有不固定的，如果用css3的彈性盒子來解決的話，當然會很容易，但是呢，css3的彈性盒子在PC端的支持並不是那麽的好，尤其是萬惡的IE瀏覽器（做web開發的都懂）。同時，使用後臺管理系統的計算機瀏覽器版本一般情況下都不會很高，這時候更要考慮瀏覽器的兼容問題了。不多說，直接上代碼。
1、自適應左右兩欄（左邊寬度固定，右邊寬度自適應）
1 <style> 2 *{margin: 0;padding: 0;} 3html,body{width: 100%;height: 100%} 4 .left{width:100px;height:100%;float: left;background: #f00;} 5 .right{height: 100%;background: #0f0;overflow: hidden;} 6 </style> 7 </head> 8 <body> 9 <div class="left"></div> 10 <div class="right"></div> 11 </body> 12 </html> 13 14 /*利用BFC的原理解決，但是此處只能寫overflow，屬性不為visible*/
2、自適應上下兩欄布局（上邊高度，下邊內容自適應）
1 <style> 2 /* *{margin: 0;padding: 0;} 3 html,body,.wrap{width: 100%;height: 100%;} 4 .wrap{position: relative;} 5 .top{height: 100px;width: 100%;background: #f00;}6 .bottom{width: 100%;position: absolute;top: 100px;bottom: 0;background: #0f0;} */ 7 *{margin: 0;padding: 0;} 8 html,body,.wrap{width: 100%;height: 100%;} 9 .wrap{padding-top: 100px;box-sizing: border-box;position: relative;} 10 .top{height: 100px;width: 100%;background: #f00;position: absolute;top: 0;} 11 .bottom{width: 100%;height: 100%;background: #0f0;} 12 </style> 13 </head> 14 <body> 15 <div class="wrap"> 16 <div class="top"></div> 17 <div class="bottom"></div> 18 </div> 19 </body> 20 </html> 21 /*此處寫了兩種方法，第一種利用定位的原理，將下邊的盒子高度拉伸到適應剩下的屏幕。第二種修改盒模型的解析規則，利用padding將下邊盒子向下推移上邊盒子的高度，剛好適應整個屏幕。*/
3、上下（左右）三欄布局（上邊高度固定，左邊寬度固定，右邊內容區自適應）
1 <style> 2 *{margin: 0;padding: 0;} 3 html,body,.wrap{width: 100%;height: 100%;} 4 .wrap{position: relative;} 5 .top{height: 100px;width: 100%;background: #f00;} 6 .main{width: 100%;position: absolute;top: 100px;bottom: 0;} 7 .left{height: 100%;width: 100px;float: left;background: #00f;} 8 .right{height: 100%;overflow: hidden;background: #ff0;} 9 10 </style> 11 </head> 12 <body> 13 <div class="wrap"> 14 <div class="top"></div> 15 <div class="main"> 16 <div class="left"></div> 17 <div class="right"></div> 18 </div> 19 </div> 20 </body> 21 </html> 22 /*先上下兩欄布局，然後在下邊的盒子裏自由兩欄布局*/
4、左中右三欄布局（左右兩邊固定，中間自適應）
<style> *{margin: 0;padding: 0} html,body,.wrap{width:100%;height: 100%;} .left{width: 100px;height: 100%;float: left;background: #f00;} .right{width:100px;height: 100%;float:right;background: #f00;} .center{height: 100%;overflow: hidden;background: #0f0;} </style> </head> <body> <div class="wrap"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> </body> </html> /*根據HTML頁面自上而下的解析規則，在頁面結構上，將右邊的盒子放在中間盒子的上邊，先將左右兩邊的盒子固定好，然後剩下的空間，中間的盒子去自適應占滿。如果中間的盒子不放在最後邊，那麽將不能實現這種效果，頁面解析到中間盒子的時候，就自動將左邊盒子的右邊剩余的空間占滿，然後右邊的盒子就在第二屏出現。*/
5、上下（左中右）四欄布局（上邊盒子高度固定，左右兩邊盒子寬度固定）
<style> *{margin: 0;padding: 0;} html,body,.wrap{width: 100%;height: 100%;} .top{width: 100%;height: 100px;background: #f00;} .main{width: 100%;position: absolute;top: 100px;bottom: 0px;} .left{width: 100px;height: 100%;float: left;background: #00f;} .right{width: 100px;height: 100%;float: right;background: #00f;} .center{height: 100%;overflow: hidden;background: #0f0;} </style> </head> <body> <div class="wrap"> <div class="top"></div> <div class="main"> <div class="left"></div> <divb class="right"></divb> <div class="center"></div> </div> </div> </body> </html> /*先將屏幕分為上下兩欄，然後將下邊的盒子分為左中右三欄*/
6、上左中右下五欄布局（中間區域自適應）
<style> *{margin: 0;padding: 0;} html,body,.wrap{width:100%;height: 100%;} .wrap{position: relative;} .top{height: 100px;width: 100%;background: #f00;} .main{width: 100%;position: absolute;top: 100px;bottom: 100px;} .bottom{width: 100%;height: 100px;position: absolute;bottom: 0;background: #00f;} .left{width:100px;height: 100%;float: left;background: #ff0;} .right{width: 100px; height: 100%;float: right;background: #0ff;} .center{height: 100%;overflow: hidden;background: #0f0;} </style> </head> <body> <div class="wrap"> <div class="top"></div> <div class="main"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> <div class="bottom"></div> </div> </body> </html> /*先寫上中下三欄布局，然後寫左中右三欄*/
常用一屏自適應布局（一）