css 两栏高度自动相等,div布局两列高度自动对齐

前几天有朋友问我用div+css布局的时候怎么保证左右两列高度一致。今天刚做完的promotion项目也有这个情况。于是抽空把它写了一下，大家一起交流。

都知道如果不定高度，那么div的高度是随着内容的变化而变化的。最简单的两列布局下，我们用div写一个简单的框架：

#left{background:#ffcc00; float:left; width:100px;

padding:7px;}

#right{background:#ff0000; float:left;width:100px;

padding:7px;}

对于这个问题，可以才用非常简单的背景图来实现。首先在两个层外面套一个和left及right宽度总和相等的层，取名为all，然后做一张和right容器一样高一样底色的图片。比如上图就做张114px(100+7*2)宽1px高的红色图片，讲其设为all的背景图片，然后设置图片属性靠右，y轴重复，在视觉上就完全ok了。

但是很多时候右侧不是一张背景图片就可以搞定的。比如这次做的推广页面。这次我是写了一个js来实现的。函数如下

function forBalance(lay1,lay2,lay3,lay4){

var referenceHeight,loginHeight,leadHeight;

referenceHeight = 0;

loginHeight = 0;

leadHeight = 0;

if (document.getElementByIdx_xx_x(lay1)) {

referenceHeight =

document.getElementByIdx_xx_x(lay1).scrollHeight;

}

if (document.getElementByIdx_xx_x(lay2)) {

loginHeight =

document.getElementByIdx_xx_x(lay2).scrollHeight;

}

if (document.getElementByIdx_xx_x(lay3)) {

leadHeight = document.getElementByIdx_xx_x(lay3).scrollHeight;

}

if (referenceHeight > (loginHeight + leadHeight)){

document.getElementByIdx_xx_x(lay4).style.height = referenceHeight –

loginHeight – leadHeight;

}

}

对应于自己的项目，因为这个页面左侧的内容肯定比右侧高，而右边有上下有两个层(上层不一定存在)，中间的样式原因无法用背景图来搞定。于是在右层中间层下面再加两个一个层，然后在页面加载完毕后用js去控制他的高度。非常简单的方法，说明了就是做做加减法，大家用这个思路应该可以解决好多累死的问题。当然也希望各位大侠提出自己方法。