Menu
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?
827
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
