三种Div高度自适应的方法
让DIV高度自适应，这是在网页设计中常遇到的问题，为了给大家提供参考，这里提供3种div高度自适应的方法：一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。
-
1、JS法
代码如下。原理：用JS判断左右DIV的高度，若不一致则设为一致。
01<divstyle="width:500px;background:#cccccc;height:0px;">02<divid="right"style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>03<divid="left"style="width:60%;;float:left;background:#376037;">04right<br>05right<br>06right<br>07right<br>08right<br>09right<br>10right<br>11</div>12</div>13<scripttype="text/javascript">14<!--15var a=document.getElementById("left");16var b=document.getElementById("right");17if(a.clientHeight<b.clientHeight){18a.style.height=b.clientHeight+"px";19}else{20b.style.height=a.clientHeight+"px";21}22-->23</script>2、背景图填充法
这是大站用得比较多的方法，如163等，研究了一下，结果如下。
这里是给父DIV设置了背景图片填充，所有DIV都不设高度。
HTML代码：
1<divclass="endArea">2<divclass="col1">第一列 左边正文</div>3<divclass="col3">第二列 右边<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>字字</div>4<divclass="col2">第三列 中间图片</div>5<divclass="clear"></div>6</div>CSS代码：
1.endArea{margin:0auto;width:960px;background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif);clear:both;}2.endArea .col1{float:left;width:573px; }3.endArea .col2{float:left;width:25px; }4.endArea .col3{float:right;width:362px;}3、补丁大法
就是“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类的方法，在IE6、IE7、FF3下测试通过。要点：
1、父DIV设置 overflow:hidden;
2、对要高度自适应的DIV设置 padding-bottom:100000px;margin-bottom:-100000px; 两列或多列同理。
代码如下：
01<html>02<head>03<metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>04<title>Div高度自适应</title>05<styletype="text/css">06#wrap{overflow:hidden;}07#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}08</style>09</head>10<body>11<divid="wrap"style="width:300px; background:#FFFF00;">12<divid="sidebar_left"style="float:left;width:100px; background:#777;">居左</div>13<divid="sidebar_mid"style="float:left;width:100px; background:#999;">14居中<br/>15居中<br/>16居中<br/>17居中<br/>18居中<br/>19居中<br/>20居中<br/>21</div><divid="sidebar_right"style="float:right;width:100px; background:#888;">居右</div></div>22</body>23</html>以上三种方法都可以解决Div高度自适应，请根据你自己的需要，三选一。
浙公网安备 33010602011771号