DIV CSS 佈局教程網

你對DIV高度自適應的方法是否了解，這裡和大家分享一下，網站制站中，我們經常要把兩個並排顯示的div實現一樣高的效果，即每列高度相同，有以下幾種方法。

DIV高度自適應方法匯總

網站優化（SEO）中，提到過網站樣式的優化，即在網站的布局設計中，采用DIV+CSS來布局。網站制站中，我們經常要把兩個並排顯示的div實現一樣高的效果，即每列高度（事先並不能確定哪列的高度）的相同，有以下幾種方法解決DIV高度自適應問題：

1、JS實現（判斷2個div高）；

2、純CSS方法；

3、加背景圖片實現。

◆DIV+CSS基本布局：

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

1、JS實現div高度自適應

代碼如下：

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

（注：網上公布了不少方法，但代碼或多或少有錯；上面的是無錯代碼；上面的代碼在IE6.0/IE7.0下通過，並沒有在Opera和Firefoxs下測試。）

2、純CSS方法實現DIV高度自適應

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

/*左右自適應相同高度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;  
}  
}  
/*左右自適應相同高度end*/  
 

3、加背景圖片實現DIV高度自適應

這個方法，很多大網站在使用，如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;}  
 

還有其他的一些方法，但主流就是這幾種了。如果你還有關於多個div自適應高度的好的代碼，請給我們留言，歡迎與我們討論。