Reputation: 231
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
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
Reputation: 1055
One possibility: zoom on your firefox could just be screwing up display. Adjust to 100% and see if that helps.
Upvotes: 0
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
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