css - Firefox 100% 高度，不间断

Question

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

不知何故，Firefox 做了自己的事情，我只是无法 100% 获得这两列。

http://jsfiddle.net/BbC4N/5/

<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

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

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

Answer 3

改变：

.wrapper {
   display: table;
}

到：

.wrapper {
   display: block;
}

我添加了 to.wrapper { margin-top: 48px; }以使left和rightdiv 可见，并且在 Firefox 中似乎一切都对我有用。

小提琴