height自适应问题困扰许久,尝试多种方法,有一种觉得较为方便,利用position定位,top和bottom同时存在,强制性盒模型,实例如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <link type="text/css" rel="stylesheet" href="style.css"> 6 </head> 7 <body> 8 <header></header> 9 <div id="container"> 10 <div class="container-left"></div> 11 <div class="container-right"></div> 12 </div> 13 14 15 </body> 16 </html>
1 @charset "utf-8"; 2 3 html,body,header,div{ 4 padding:0px; 5 margin:0px; 6 font-size:14px; 7 } 8 header{ 9 width:100%; 10 height:60px; 11 background-color:#2189BE; 12 position:fixed; 13 } 14 15 #container{ 16 width:100%; 17 position:absolute; 18 top:60px; 19 left:0px; 20 bottom:0px;/*这里一定要top和bottom一起写,强制盒模型*/ 21 } 22 23 #container .container-left{ 24 width:25%; 25 background-color:#2B2E3D; 26 position:absolute; 27 left:0px; 28 bottom:0; 29 top:0px; 30 } 31 32 #container .container-right{ 33 background-color:#EDEDED; 34 width:75%; 35 position:absolute; 36 right:0px; 37 top:0px; 38 bottom:0; 39 }