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

2011 年 5 月 15 日 0 条评论 1.68k 次阅读 0 人点赞

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

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

1、JS法

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

<div style="width:500px;background:#cccccc;height:0px;">
<div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>
<div id="left" style="width:60%;;float:left;background:#376037;">
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>

<script type="text/javascript">
<!--
var a=document.getElementById("left");
var b=document.getElementById("right");
if(a.clientHeight<b.clientHeight)
{
a.style.height=b.clientHeight+"px";
}
else
{
b.style.height=a.clientHeight+"px";
}
-->
</script>

 

 

2、背景图填充法

这是大站用得比较多的方法，如163等，研究了一下，结果如下。

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

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

<div>
<div class="col1">第一列　左边正文</div>
<div>第二列　右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>
<div class="col2">第三列　中间图片</div>
<div class="clear"></div>
</div>

 

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

.endArea{margin:0 auto; 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、补丁大法

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

要点：

1、父DIV设置　overflow:hidden;

2、对要高度自适应的DIV设置　padding-bottom:100000px;margin-bottom:-100000px; 两列或多列同理。

代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Copterfly's Blog</title>
<style type="text/css">
<!--
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
-->
</style></head>

<body>
<div id="wrap" style="width:300px; background:#FFFF00;">
<div id="sidebar_left" style="float:left;width:100px; background:#777;">Left</div>
<div id="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>
<div id="sidebar_right" style="float:right;width:100px; background:#888;">Right</div>
</div>
</body>
</html>

 

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

转载请自觉加入薛雷雷网站 文字链接(http://auan.cn)

暂无
© 著作权归作者所有

雷雷

这个人太懒什么东西都没留下

文章评论（0）

(Spamcheck Enabled)