三种有效解决DIV高度自适应的方法-div高度自适应

本文和大家重点讨论一下DIV高度自适应的三种有效解决方法，它们分别是一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。

DIV高度自适应的三种有效解决方法

DIV＋CSS设计俨然已成网页设计界的标准了。这种设计的好处大家都是知道的，但有些小问题确实很棘手，例如令人头痛的“DIV高度自适应”问题。

现在有三种解决DIV高度自适应行之有效的办法，一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。

1、JS法

代码如下。原理：用JS判断左右DIV的高度，若不一致则设为一致。

<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> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

2、背景图填充法

第二种解决DIV高度自适应的方法是背景图填充法，这是大站用得比较多的方法，如163等，研究了一下，结果如下。

这里是给父DIV设置了背景图片填充，所有DIV都不设高度。

HTML代码（取自163最终页面）：

<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> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.

CSS代码（取自163最终页面）：

.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;}  
 
1.
2.
3.
4.
5.
6.
7.

3、补丁大法

最后一种DIV高度自适应的方法就是补丁大法。就是　“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类一点的方法，在IE6、IE7、FF3下测试通过。原理自己理解。

要点：

1、父DIV设置　overflow:hidden;

2、对要高度自适应的DIV设置　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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

请根据实际情况，三选一用。

【编辑推荐】