实现宽高自适应

 1 <!DOCTYPE html>
 2 <head>
 3  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 4  <title>test</title>
 5     <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
 6  
 7  <style type="text/css">
 8 *{margin:0px;padding:0px;}
 9  .header {
10   100%;
11  background: #567;
12  height: 100px;
13  }
14 
15 #col1{
16  background: #DDD;
17  }
18 #col2{
19     background: salmon;
20 }
21  #middle{ zoom:1;}
22  #left_top{
23      background: red;
24       100%;
25  }
26  #left_bottom{
27      background: palegoldenrod;
28  }
29  </style>
30 </head>
31 <body>
32 
33 <div class="header" id="XX">header</div>
34 <div id="middle">
35    <div id="col1" class="col-lg-5 col-md-5 col-sm-5">
36            <div id="left_top"></div>
37            <div id="left_bottom"></div>
38    </div>
39    <div id="col2" class="col-lg-7 col-md-7 col-sm-7">
40               <div id="right_top"></div>
41            <div id="right_bottom"></div>
42    </div>
43 
44 </div>
45 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
46 <script src="bootstrap.min.js"></script>
47 <script>
48 total = document.documentElement.clientHeight;
49 colHeight = total-50-document.getElementById("col1").offsetTop;
50 document.getElementById("col1").style.height=colHeight+"px";
51 document.getElementById("col2").style.height=colHeight+"px";
52 document.getElementById("left_top").style.height=colHeight/2+"px";
53 document.getElementById("left_bottom").style.height=colHeight/2+"px";
54 </script>
55 </body>
56 </html>

加上bootstrap真正实现宽高自适应

还有一种通过定位来实现的高度自适应

用js控制css中style.height和style.width时应注意px单位问题

1、document.getElementById('div').style.height=100; //这样写以IE里会正确执行，把ID为div元素高改为100象素。

2、但是读的时候，alert(document.getElementById('div').style.height+10); //这样将会出错，因为读取style.height的时候，会以"100px"的形式出现。

3、到了FF里，不光读出来的是"100px"，写的时候，也必须是document. getElementById('div').style.height='100px';这样才能有效果

用javascript控制css的对象高度或者宽度的时候，我们就直接用parseInt($('div').style.height)，无论读写，IE或者FF