常用一屏自適應布局（一）
在web開發的時候，有時候會遇見一些自適應布局，而且是一屏內自適應，特別是寫一些後臺管理系統界面，都是一屏顯示，而且顯示內容布局有固定的，也有不固定的，如果用css3的彈性盒子來解決的話，當然會很容易，但是呢，css3的彈性盒子在PC端的支持並不是那麼的好，尤其是萬惡的IE瀏覽器（做web開發的都懂）。同時，使用後臺管理系統的計算機瀏覽器版本一般情況下都不會很高，這時候更要考慮瀏覽器的兼容問題了。不多說，直接上代碼。
1、自適應左右兩欄（左邊寬度固定，右邊寬度自適應）
1 <style> 2 *{margin: 0;padding: 0;} 3 html,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></div>10 <div></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>16 <div></div>17 <div></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>14 <div></div>15 <div>16 <div></div>17 <div></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> <div></div> <div></div> <div></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> <div></div> <div> <div></div> <divb></divb> <div></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> <div></div> <div> <div></div> <div></div> <div></div> </div> <div></div> </div></body></html>/*先寫上中下三欄布局，然後寫左中右三欄*/