在Firefox中CSS高度100%的bug？

Question

在Firefox中CSS高度100%的bug？

我有以下html:

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

Run Code Online (Sandbox Code Playgroud)

和以下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;
}

Run Code Online (Sandbox Code Playgroud)

在chrome中一切都没关系.contentBody延伸到剩余的高度.但是在Firefox中添加了一些空格(如30px)在标签下面..有谁知道为什么？

Answer 1

Pon*_*man 0

它在 Firefox 和 Chrome 上显示相同。该问题可能是由 <"contentBody"> 内的内容引起的，也许您可以尝试删除其中的一些内容。

归档时间：	11 年，11 月前
查看次数：	4319 次
最近记录：	9 年，5 月前