Question

我有以下html：

<html>
    <head> … </head>
    <body>
        <div id="entireContent">
            <div class="header"> … </div>
            <div id="contentBody"> … </div>
        </div>
    </body>
</html>

以及以下css：

#entireContent {
    min-height: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 1200px;
    max-width: 1200px;
    -moz-box-sizing: border-box;
}

.header {
    width: 100%;
    position: relative;
    margin: auto;
    height: 83px;
}

#contentBody {
    border-top: 5px solid rgb(45, 87, 40);
    height: calc(100% - 83px);
    -moz-box-sizing: border-box;
}

在Chrome中，一切都没问题。 contentBody延伸到剩余的高度。但是在firefox中添加一些空格（如30px）在标签下面.. 有谁知道为什么？

Answer 1

您是否删除了html默认边距？您还应该使用wekbit前缀版本来进行大小调整（因为您使用的边框只有框格大小设置为边框 - 仅适用于mozilla）

-webkit-box-sizing:border-box;

Answer 2

它在firefox和chrome上显示相同。该问题可能是由＆lt;“contentBody”＆gt;内的内容引起的。也许您可以尝试删除其中的一些内容。

Answer 3

一种可能性：放大你的火狐可能只是搞砸了显示器。调整为100％，看看是否有帮助。

Answer 4

有时它是由Firefox浏览器中的某个特殊插件或插件引起的。我遇到了与你完全相同的问题，我尝试了一切，后来发现它是因为Firefox浏览器中的Xunlei Thunder插件，它在我的页面下添加了30px白条。禁用后，白条消失，显示与Chrome浏览器完全相同的结果。

在Firefox中CSS高度100％的bug？

4 个答案: