你对DIV高度自适应的方法是否了解，这里和大家分享一下，网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度相同，有以下几种方法。
DIV高度自适应方法汇总
网站优化（seo）中，提到过网站样式的优化，即在网站的布局设计中，采用DIV+CSS来布局。网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同，有以下几种方法解决DIV高度自适应问题：
1、JS实现（判断2个div高）；
2、纯CSS方法；
3、加背景图片实现。
◆DIV+CSS基本布局：
<dividdivid="mm"> <dividdivid="mm1"></div> <dividdivid="mm2"></div> </div>
1、js实现div高度自适应
代码如下：
<scripttypescripttype="text/javascript"> <!– windowwindow.onload=window.onresize=function(){ if(document.getElementById("mm2").clientHeight<document. getElementById("mm1").clientHeight){ document.getElementById("mm2").style.height=document. getElementById("mm1").offsetHeight+"px"; } else{ document.getElementById("mm1").style.height=document. getElementById("mm2").offsetHeight+"px"; } } –> </script>
（注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；上面的代码在IE6.0/IE7.0下通过，并没有在opera和firefoxs下测试。）
2、纯CSS方法实现DIV高度自适应
CSS里代码（IE下测试通过，但不会显示div下边框，即border-bottom）：
/*左右自适应相同高度start*/ #m1,#m2 { padding-bottom:32767px!important; margin-bottom:-32767px!important; } @mediaalland(min-width:0px){ #m1,#m2 { padding-bottom:0!important; margin-bottom:0!important; } #m1:before,#m2:before { content:'[DONOTLEAVEITISNOTREAL]’; display:block; background:inherit; padding-top:32767px!important; margin-bottom:-32767px!important; height:0; } } /*左右自适应相同高度end*/
3、加背景图片实现DIV高度自适应
这个方法，很多大网站在使用，如163，sina等。
XHTML代码：
<dividdivid="wrap"> <dividdivid="column1">这是第一列</div> <dividdivid="column1">这是第二列</div> <divclassdivclass="clear"></div> </div>
CSS代码:
#wrap{width:776px;background:url(bg.gif)repeat-y300px;} #column1{float:left;width:300px;} #column2{float:right;width:476px;} .clear{clear:both;}
还有其他的一些方法，但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码，请给我们留言，欢迎与我们讨论。
人若勇敢就是自己最好的朋友
