让并排的两个Div自适应高度（一样高）

 由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。

 

    div+css基本布局：

 

<div id="mm">
<div id="mm1"></div>
<div id="mm2"></div>
</div>

 

    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下通过，考虑绝大数人仍然用的是IE，所以并没有在opera和firefoxs下调试，哪位用的是opera或ff，可以帮忙看看飘易博客的DIV是否保持了一致的高度。）

 

    2、纯CSS方法

 

    css里代码（调试通过，但不会显示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代码：

 

<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>

 

    CSS代码:

 

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

 

     还有其他的一些方法，但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码，请给我们留言，欢迎与我们讨论。