user2361682
user2361682

Reputation: 231

CSS height 100% bug in firefox?

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?

Upvotes: 6

Views: 5579

Answers (4)

Zhang Buzz
Zhang Buzz

Reputation: 11068

Sometimes it's caused by some special plugin or addon in your Firefox browser. I met exactly same problem as yours, I tried everything and later found it was cause be a Xunlei Thunder plugin in Firefox browser, it added 30px white bar under my page. After I disabled it, the white bar disappear, showing exactly same result as in Chrome browser.

Upvotes: 0

azochz
azochz

Reputation: 1055

One possibility: zoom on your firefox could just be screwing up display. Adjust to 100% and see if that helps.

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

Did you removed the html default margins? You should have also the wekbit prefixed version for box-sizing(because you used border with box-sizing set to border-box only for mozilla)

-webkit-box-sizing:border-box;

Upvotes: 1

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

It displays same on firefox and chrome. The issue may be caused by the contents inside the <"contentBody"> Maybe you can try removing some of the content inside it.

Upvotes: 0

Related Questions