三種有效解決DIV高度自適應(yīng)的方法

作者：admin 2010-08-30 09:15:15

DIV高度自適應(yīng)的問(wèn)題你是否了解，本文向大家描述一下DIV高度自適應(yīng)的三種有效解決方法，希望對(duì)你的學(xué)習(xí)有所幫助。

本文和大家重點(diǎn)討論一下DIV高度自適應(yīng)的三種有效解決方法，它們分別是一是JS法、二是背景圖填充法、三是“補(bǔ)丁大法”（比較變態(tài)）。

DIV高度自適應(yīng)的三種有效解決方法

DIV＋CSS設(shè)計(jì)儼然已成網(wǎng)頁(yè)設(shè)計(jì)界的標(biāo)準(zhǔn)了。這種設(shè)計(jì)的好處大家都是知道的，但有些小問(wèn)題確實(shí)很棘手，例如令人頭痛的“DIV高度自適應(yīng)”問(wèn)題。

現(xiàn)在有三種解決DIV高度自適應(yīng)行之有效的辦法，一是JS法、二是背景圖填充法、三是“補(bǔ)丁大法”（比較變態(tài)）。

1、JS法

代碼如下。原理：用JS判斷左右DIV的高度，若不一致則設(shè)為一致。

<divstyledivstyle="width:500px;background:#cccccc;height:0px;"> 
<dividdivid="right"style="width:380%;height:100%;  
float:left;border:1pxsolid#265492;">left</div> 
<dividdivid="left"style="width:60%;;float:left;  
background:#376037;"> 
right<br> 
right<br> 
right<br> 
right<br> 
right<br> 
right<br> 
right<br> 
</div> 
</div> 
 
<scripttypescripttype="text/javascript"> 
<!--  
vara=document.getElementById("left");  
varb=document.getElementById("right");  
if(a.clientHeight<b.clientHeight)  
{  
a.style.height=b.clientHeight+"px";  
}  
else  
{  
b.style.height=a.clientHeight+"px";  
}  
--> 
</script>

2、背景圖填充法

第二種解決DIV高度自適應(yīng)的方法是背景圖填充法，這是大站用得比較多的方法，如163等，研究了一下，結(jié)果如下。

這里是給父DIV設(shè)置了背景圖片填充，所有DIV都不設(shè)高度。

HTML代碼（取自163最終頁(yè)面）：

<divclassdivclass="endArea"> 
<divclassdivclass="col1">第一列　左邊正文</div> 
<divclassdivclass="col3">第二列　右邊<br/><br/> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/>字字</div> 
<divclassdivclass="col2">第三列　中間圖片</div> 
<divclassdivclass="clear"></div> 
</div>

CSS代碼（取自163最終頁(yè)面）：

.endArea{margin:0auto;width:960px;  
 
background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif);clear:both;}  
.endArea.col1{float:left;width:573px;}  
.endArea.col2{float:left;width:25px;}  
.endArea.col3{float:right;width:362px;}

3、補(bǔ)丁大法

最后一種DIV高度自適應(yīng)的方法就是補(bǔ)丁大法。就是　“隱藏容器溢出”和“正內(nèi)補(bǔ)丁”和“負(fù)外補(bǔ)丁”結(jié)合的方法。比較另類一點(diǎn)的方法，在IE6、IE7、FF3下測(cè)試通過(guò)。原理自己理解。

要點(diǎn)：

1、父DIV設(shè)置　overflow:hidden;

2、對(duì)要高度自適應(yīng)的DIV設(shè)置　padding-bottom:100000px;margin-bottom:-100000px;兩列或多列同理。

代碼如下：

<html> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
<title>Copterfly'sBlog</title> 
<styletypestyletype="text/css"> 
<!--  
#wrap{overflow:hidden;}  
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}  
--> 
</style></head> 
 
<body> 
<dividdivid="wrap"style="width:300px;background:#FFFF00;"> 
<dividdivid="sidebar_left"style="float:left;width:100px;  
background:#777;">Left</div> 
<dividdivid="sidebar_mid"style="float:left;width:100px;  
background:#999;"> 
Middle<br/> 
Middle<br/> 
Middle<br/> 
Middle<br/> 
Middle<br/> 
Middle<br/> 
Middle<br/> 
Middle<br/> 
Middle<br/> 
</div> 
<dividdivid="sidebar_right"style="float:right;width:100px;  
background:#888;">Right</div> 
</div> 
</body> 
</html>

請(qǐng)根據(jù)實(shí)際情況，三選一用。

【編輯推薦】

五大常用Div高度自適應(yīng)的方法
IE6、IE7、Firefox中margin問(wèn)題解決辦法
DIV布局規(guī)范中CSS類及id命名方式
CSS兼容：解決IE6、IE7和IE8的兼容問(wèn)題妙招
將XHTML+CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面技巧

責(zé)任編輯：佚名來(lái)源： copterfly.cn

DIV高度自適應(yīng)