让并排的两个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=funct {
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 和 firefox 下调试，哪位用的 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 自适应高度的好的代码，请给我留言，欢迎与我讨论。