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

Question

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

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

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

Answer 1

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

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

Answer 2

啊，旧的两列布局。除非您想借助 JavaScript 来跟踪一列的高度来调整另一列，否则您将无法以您期望的方式进行操作。在这些情况下，使用 height="100%" 通常也不起作用。

你可以做的是类似于旧的仿柱技术。div 不会调整大小，但您在父元素上有一个垂直平铺的背景图像，给人一种等列的错觉。老派，是的，但有效。

Answer 3

您可以使用 JavaScript 获取 left 的高度div，然后将 rightdiv设置为该高度。

要获取左侧 div 的高度：

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

设置右 div 的高度：

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

您的 JSFiddle 示例已修复。