教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

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

更新時(shí)間:2016年03月15日17時(shí)25分 來(lái)源:傳智播客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ā)：http://xamj520.com/ui

0 分享到：
和我們?cè)诰€交談！