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?