CSS height 100% bug in firefox?

Viewed 5097

I have the following html:

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

and the following 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;
}

In chrome everything it's ok. the contentBody stretches all over the remaining height. But in firefox add some white space (like 30px) down under the tag.. Does anyone know why?

4 Answers
Related