你對DIV高度自適應(yīng)的方法是否了解，這里和大家分享一下，網(wǎng)站制站中，我們經(jīng)常要把兩個(gè)并排顯示的div實(shí)現(xiàn)一樣高的效果，即每列高度相同，有以下幾種方法。

DIV高度自適應(yīng)方法匯總

網(wǎng)站優(yōu)化（seo）中，提到過網(wǎng)站樣式的優(yōu)化，即在網(wǎng)站的布局設(shè)計(jì)中，采用DIV+CSS來布局。網(wǎng)站制站中，我們經(jīng)常要把兩個(gè)并排顯示的div實(shí)現(xiàn)一樣高的效果，即每列高度（事先并不能確定哪列的高度）的相同，有以下幾種方法解決DIV高度自適應(yīng)問題：

1、JS實(shí)現(xiàn)（判斷2個(gè)div高）；

2、純CSS方法；

3、加背景圖片實(shí)現(xiàn)。

◆DIV+CSS基本布局：

<dividdivid="mm"> 
<dividdivid="mm1"></div> 
<dividdivid="mm2"></div> 
</div> 

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

代碼如下：

<scripttypescripttype="text/javascript"> 
<!--  
windowwindow.onload=window.onresize=function(){  
if(document.getElementById("mm2").clientHeight<document.
getElementById("mm1").clientHeight){  
document.getElementById("mm2").style.height=document.
getElementById("mm1").offsetHeight+"px";  
}  
else{  
document.getElementById("mm1").style.height=document.
getElementById("mm2").offsetHeight+"px";  
}  
 
}  
--> 
</script> 
 

 （注：網(wǎng)上公布了不少方法，但代碼或多或少有錯(cuò)；上面的是無錯(cuò)代碼；上面的代碼在IE6.0/IE7.0下通過，并沒有在opera和firefoxs下測試。）

2、純CSS方法實(shí)現(xiàn)DIV高度自適應(yīng)

CSS里代碼（IE下測試通過，但不會顯示div下邊框，即border-bottom）：

/*左右自適應(yīng)相同高度start*/  
#m1,#m2  
{  
padding-bottom:32767px!important;  
margin-bottom:-32767px!important;  
}  
@mediaalland(min-width:0px){  
#m1,#m2  
{  
padding-bottom:0!important;  
margin-bottom:0!important;  
}  
#m1:before,#m2:before  
{  
content:'[DONOTLEAVEITISNOTREAL]';  
display:block;  
background:inherit;  
padding-top:32767px!important;  
margin-bottom:-32767px!important;  
height:0;  
}  
}  
/*左右自適應(yīng)相同高度end*/  
 

 3、加背景圖片實(shí)現(xiàn)DIV高度自適應(yīng)

這個(gè)方法，很多大網(wǎng)站在使用，如163，sina等。

XHTML代碼：

<dividdivid="wrap"> 
<dividdivid="column1">這是第一列</div> 
<dividdivid="column1">這是第二列</div> 
<divclassdivclass="clear"></div> 
</div> 
 

 CSS代碼:

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

還有其他的一些方法，但主流就是這幾種了。如果你還有關(guān)于多個(gè)div自適應(yīng)高度的好的代碼，請給我們留言，歡迎與我們討論。
 

【編輯推薦】

1. 三種有效解決DIV高度自適應(yīng)的方法
2. IE6、IE7、Firefox中margin問題解決辦法
3. DIV布局規(guī)范中CSS類及id命名方式
4. CSS兼容：解決IE6、IE7和IE8的兼容問題妙招
5. 將XHTML+CSS頁面轉(zhuǎn)換為打印機(jī)頁面技巧