混合流体布局的Firefox问题答案

【问题标题】：Firefox problem with hybrid fluid layout混合流体布局的Firefox问题
【发布时间】：2011-07-24 01:40:11
【问题描述】：

我正在处理这种布局（垂直居中，流动的中间 div，固定高度） http://jsfiddle.net/chchrist/uyzJj/13/

我的问题是，在 Firefox 中，#bluebox 的位置与 div#wrapper 无关。我该如何解决这个问题？

提前致谢。

【问题讨论】：

【解决方案1】：

选项 1

在#wrapper 上将display: table-cell 更改为float: left 将解决您的问题。实例：http://jsfiddle.net/uyzJj/18/

#wrapper {
    border: 1px solid #000000;
    float: left;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

选项 2

在#superWrapper 上将display: table 更改为display: block 将解决您的相关问题。

【讨论】：

我需要#wrapper 的高度为 100%。设置向左浮动可以解决问题，但会删除高度。
@chchrist：在示例中我没有看到差异，但尝试添加#wrapper {height: 100%;}。
黑色边框必须占据屏幕的 80%。我已经将 80% 分配给了 superwrapper，并将 100% 分配给了 #wrapper 在浮动时采用其元素的高度。
@chchrist：我看过了，正如我所说，解决您的相对定位问题的唯一方法是使用我上面回答中的两个选项之一。关于流体布局的第二个问题，我认为您需要发布另一个问题并应用修复程序，寻求流体布局和填充 div 100% 的帮助。