<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Div高度自适应</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="300px; background:#FFFF00;"> <div id="sidebar_left" style="float:left;100px; background:#777;">居左</div> <div id="sidebar_mid" style="float:left;100px; background:#999;"> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> 居中<br /> </div> <div id="sidebar_right" style="float:right;100px; background:#888;">居右</div></div> </body> </html>
方法二：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>123</title> </head> <body> <div style="500px;background:#cccccc;height:0px;"> <div id="right" style="380%;height:100%;float:left;border:1px solid #265492;">left</div> <div id="left" style="60%;;float:left;background:#376037;"> 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> </body> </html>
方法三 背景图填充法
这是大站用得比较多的方法，如163等，研究了一下，结果如下。
这里是给父DIV设置了背景图片填充，所有DIV都不设高度。
HTML代码： view sourceprint?1 <div class="endArea"> 2 <div class="col1">第一列 左边正文</div> 3 <div class="col3">第二列 右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div> 4 <div class="col2">第三列 中间图片</div> 5 <div class="clear"></div> 6 </div> CSS代码： view sourceprint?1 .endArea{margin:0 auto; 960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;} 2 .endArea .col1{float:left; 573px; } 3 .endArea .col2{float:left; 25px; } 4 .endArea .col3{float:right; 362px;}