UI培训之DIV高度自适应方法汇总

更新时间:2016年03月15日17时25分来源:传智播客UI培训学院浏览次数:

1、JS实现（判断2个div高）；
2、纯CSS方法；
3、加背景图片实现。

◆DIV+CSS基本布局：

1           <div id="mm">
2              <div id="mm1"></div>
3              <div id="mm2"></div>
4           </div>

1、js实现div高度自适应

代码如下：

1           <script type="text/javascript">
2           window.onload=window.onresize=function(){
3                  if(document.getElementById("mm2").clientHeight<document.
4                         getElementById("mm1").clientHeight){
5                         document.getElementById("mm2").style.height=document.
6                         getElementById("mm1").offsetHeight+"px";
7                  }
8                  else{
9                         document.getElementById("mm1").style.height=document.
10                     getElementById("mm2").offsetHeight+"px";
11              }
12       }
13       </script>

2、纯CSS方法实现DIV高度自适应

CSS代码

1           #m1,#m2
2           {
3           padding-bottom:32767px!important;
4           margin-bottom:-32767px!important;
5           }
6           @media all and (min-width:0px){
7                  #m1,#m2
8                  {
9                  padding-bottom:0!important;
10              margin-bottom:0!important;
11              }
12              #m1:before,#m2:before
13              {
14              content:'[DONOTLEAVEITISNOTREAL]';
15              display:block;
16              background:inherit;
17              padding-top:32767px!important;
18              margin-bottom:-32767px!important;
19              height:0;
20              }
21       }

3、加背景图片实现DIV高度自适应

html代码：

1           <div id="wrap">
2                  <div id="column1">这是第一列</div>
3                  <div id="column1">这是第二列</div>
4                  <div class="clear"></div>
5           </div>

css代码：

1           #wrap{width:776px;background:url(bg.gif) repeat-y 300px;}
2           #column1{float:left;width:300px;}
3           #column2{float:right;width:476px;}
4           .clear{clear:both;}

本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：