UI培訓(xùn)之DIV高度自適應(yīng)方法匯總

更新時(shí)間:2016年03月15日17時(shí)25分來源:傳智播客UI培訓(xùn)學(xué)院瀏覽次數(shù):

1、JS實(shí)現(xiàn)（判斷2個(gè)div高）；
2、純CSS方法；
3、加背景圖片實(shí)現(xiàn)。

◆DIV+CSS基本布局：

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

1、js實(shí)現(xiàn)div高度自適應(yīng)

代碼如下：

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方法實(shí)現(xiàn)DIV高度自適應(yīng)

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、加背景圖片實(shí)現(xiàn)DIV高度自適應(yīng)

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;}

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：