Question

我想构建一个包含两列高度为100％的模板。它们应该作为一列粘在一起，大约960px。

不知何故，Firefox做了自己的事情，我只是不能100％获得两列。

<div id="head">Menu</div>
<div class="wrapper">
    <div class="wrapper2">
        <div id="left" class="inner">LEFT</div>
        <div id="right" class="inner">RIGHT</div>
    </div> 
</div>

Answer 1

您可以尝试使用jquery：

var leftHeight = $('#left').height();
var rightHeight = $('#right').height();
if (leftHeight >= rightHeight) {
   $('#right').css({'height':leftHeight});
} else {
   $('#left').css({'height':rightHeight});
}

Answer 2

请查看这篇文章，它可能会帮到你。流体宽度相等高度列：http://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

在这种情况下，我建议使用CSS表：

这是一个非常简化的演示：http://jsfiddle.net/BbC4N/9/

Answer 4

更改：

.wrapper {
   display: table;
}

到：

.wrapper {
   display: block;
}

我已添加到.wrapper { margin-top: 48px; }以使left和right div可见，所有内容似乎都适用于Firefox。

<强> Fiddle

Firefox 100％高度，nobreak

4 个答案: