由于设计页面需要，要把两个并排显示的 div 实现一样高的效果， n 行 n 列布局，每列高度（事先并不能确定哪列的高度）相同，每个设计师追求的目标。方法有以下几种： 1 JS 实现（判断 2 个 d

由于设计页面需要，要把两个并排显示的 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.getElementByIdx_x "mm2" .clientHeight<document.getElementByIdx_x "mm1" .clientHeight {

document.getElementByIdx_x "mm2" .style.height=document.getElementByIdx_x "mm1" .offsetHeight+"px";

}

else{

document.getElementByIdx_x "mm1" .style.height=document.getElementByIdx_x "mm2" .offsetHeight+"px";

}

}

-->

</script>

注：网上公布了不少方法，但代码或多或少有错；上面的无错代码；测试在 IE6.0/IE7.0 下通过，考虑绝大数人仍然用的 IE 所以并没有在 opera 和 firefox 下调试，哪位用的 opera 或 ff 可以协助看看 飘易博客 DIV 否保持了一致的高度。

2 纯 CSS 方法

css 里代码（调试通过，但不会显示 div 下边框，即 border-bottom

#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;

}

}

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 自适应高度的好的代码。

4、附上一段采用jquery脚本来控制两个对象高度一致的代码

<script type="text/javascript" src="../js/jquery1.4.2.js">

</script>

<script language="javascript">

$(document).ready(function(){

AdjustColumnsHeight(".content",".bar");

});

AdjustColumnsHeight = function(obj1,obj2)

{

var h1 = $(obj1).outerHeight();

var h2 = $(obj2).outerHeight();

var mh = Math.max( h1, h2);

$(obj1).height(mh);

$(obj2).height(mh);

}

</script>