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

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

我走到这一步：http://jsfiddle.net/henrikandersson/vnUdc/2/

编辑：解决，请参阅下面

来源

2012-04-13 Henrik Andersson

你需要支持IE7吗？如果没有，你可以使用'display：table-cell'。 [例如。]（http://stackoverflow.com/questions/6708816/3-columns-center-column-fixed-sides-fill-parents/6708947#6708947） – thirtydot 2012-04-13 15:13:47

@ thirtydot非常感谢，很像一个魅力工作！不需要IE7支持。 – 2012-04-16 15:00:22

所以，我得到了一个答案，从@thirtydot我的问题（参见上面的注释）：

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

来源

2012-07-08 09:11:59

试图找到一种方法来设置评论作为接受的答案，但似乎无法找到一个好方法。如果错误地发布自己的答案，请纠正我的错误。 – 2012-07-08 09:12:54

你在哪里添加表格单元属性？ – blessenm 2013-07-24 06:53:50

啊，醇”两个栏布局发表评论。除非你想用JavaScript来跟踪一列的高度来调整另一列，否则你将无法按照你期望的方式去做。使用高度=“100％”通常在这些情况下也不起作用。

你可以做什么就像旧的Faux Column技术。 div不会调整大小，但是在垂直平铺的父元素上有一个背景图像，给出了相等列的幻觉。老派，是的，但有效。

来源

2012-04-13 15:14:10 chipcullen

不幸的是，这将不起作用，因为我需要两列高度相同。原因是我需要在右列的中间（垂直）放置一个按钮。 – 2012-04-16 13:53:49

ahh - 是的，那么虚拟列将无法工作。看起来像你从十三点一个好主意 – chipcullen 2012-04-16 15:59:43

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

为了获得左格的高度：

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

要设置合适的DIV的高度：

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

Your JSFiddle example fixed.

来源

2012-04-13 15:36:34 Samwise

感谢您的输入，但我需要使它在没有Javascript的情况下工作。 Thirtydot提供了一个解决方案，参见上文。 – 2012-04-16 15:01:32

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

回答

相关问题