【原创】关于高度自适应问题

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 }

 

posted on 2016-05-04 11:00  东渐  阅读(123)  评论(0)  编辑  收藏  举报

导航