Firefox 100%高度,nobreak

问题描述:

我想用两列100%高度构建模板。 他们应该拼在一起作为一列,一起约960px。Firefox 100%高度,nobreak

不知何故,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> 

在这种情况下,我建议使用CSS表:

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

+0

谢谢。我现在用'table','table-row','table-cell'。 – dichterDichter 2013-02-18 11:51:35

+0

只是要记住'css'表在IE7中不起作用。 – otinanai 2013-02-18 11:52:45

+0

在所有?,我只有IE8,我必须找到与IE7的电脑 – dichterDichter 2013-02-18 11:57:46

你可以尝试使用jQuery:

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

请查看这篇文章,它可以帮助你。 流体宽度相等的高度专栏:http://css-tricks.com/fluid-width-equal-height-columns/

变化:

.wrapper { 
    display: table; 
} 

到:

.wrapper { 
    display: block; 
} 

我已添加到.wrapper { margin-top: 48px; }以使leftright div可见,并且在Firefox中一切似乎都适用于我。

Fiddle

+0

很酷,谢谢。 – dichterDichter 2013-02-18 11:50:36