2列div布局：右列固定宽度，左流体，高度相对于彼此

Question

我想要一个有两列，两个div的布局，其中左边有一个流体宽度，右边有一个固定宽度。到目前为止一切顺利 - 请参阅下面的jsfiddle - 但是，右列的高度必须与左列的高度相关。因此，如果我在流体列中有一些内容并且会调整浏览器窗口的大小，从而增加或减少左列的高度，那么右边的列应该跟随并获得相同的高度。

到目前为止我得到了什么：http://jsfiddle.net/henrikandersson/vnUdc/2/

编辑：已解决，请参阅下面的评论

Answer 1

啊，ol'两列布局。除非您想使用JavaScript来跟踪一列的高度以调整另一列，否则您将无法按照预期的方式执行此操作。在这些情况下，使用height =“100％”通常也不起作用。

可以做的事情就像旧的Faux Column技术一样。 div不会调整大小，但是在父元素上有一个垂直切片的背景图像，给出了相等列的错觉。老学校，是的，但有效。

Answer 2

您可以使用JavaScript获取左侧div的高度，然后将右侧div设置为此高度。

获得左边div的高度：

var divHeight = document.getElementById('left').offsetHeight;

设置右div的高度：

document.getElementById('right').style.height = divHeight+'px';

Your JSFiddle example fixed.

Answer 3

所以，我从@thirtydot得到了我的问题答案（见上面的评论）：

  

您需要支持IE7吗？如果没有，您可以使用display：table-cell