码迷,mamicode.com
首页 > 其他好文 > 详细

实现宽高自适应

时间:2017-04-11 14:57:34      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:boot   通过   .com   htm   问题   alert   java   nbsp   min   

 

 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  width: 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      width: 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

实现宽高自适应

标签:boot   通过   .com   htm   问题   alert   java   nbsp   min   

原文地址:http://www.cnblogs.com/colaman/p/6693349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!