2列div布局：右列固定宽度，左流体，高度相对答案

【问题标题】：2 column div layout: right column fixed width, left fluid, height relative to eachother2列div布局：右列固定宽度，左流体，高度相对
【发布时间】：2012-07-08 17:11:59
【问题描述】：

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

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

编辑：已解决，见下方评论

【问题讨论】：

你需要支持IE7吗？如果没有，您可以使用display: table-cell。 Example.
@thirtydot 非常感谢，这就像一个魅力！不需要 IE7 支持。

标签： css html fixed fluid

【解决方案1】：

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

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

【讨论】：

不幸的是，这不起作用，因为我需要两列具有相同的高度。原因是我需要在右栏的中间（垂直）放置一个按钮。
啊-是的，那么人造列将不起作用。看来你从 30dot 那里得到了一个好主意

【解决方案2】：

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

获取左侧div的高度：

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

设置右div的高度：

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

Your JSFiddle example fixed.

【讨论】：

感谢您的输入，但我需要让它在没有 Javascript 的情况下工作。不过，Thirtydot 提供了一个解决方案，见上文。

【解决方案3】：

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

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

【讨论】：

试图找到一种方法将评论设置为接受的答案，但似乎找不到一个好方法。如果像这样自己发布答案是错误的，请纠正我。
你在哪里添加 table-cell 属性？