两个DIV高度自适应方法汇总

网站优化（seo）中，提到过网站样式的优化，即在网站的布局设计中，采用DIV+CSS来布局。网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同，有以下几种方法（方法来源来互联网）： 1、JS实现（判断2个div高）； 2、纯css方法； 3、加背景图片实现。 div+css基本布局：

1、js实现div自适应高度 代码如下：

<script type="text/javascript">
<!--
window.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方法 css里代码（IE下测试通过，但不会显示div下边框，即border-bottom）： /*左右自适应相同高度start*/ #m1,#m2 { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #m1,#m2 { padding-bottom: 0 !important; margin-bottom: 0 !important; } #m1:before, #m2:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } /*左右自适应相同高度end*/

3、加背景图片 这个方法，很多大网站在使用，如163，sina等。 XHTML代码：

这是第一列

这是第二列

CSS代码: #wrap{ width:776px; background:url(bg.gif) repeat-y 300px;} #column1{ float:left; width:300px;} #column2{ float:right; width:476px;} .clear{ clear:both;}