I have a web page with large div(for example white) and another div that is follows the previous one. The problem is that if white block is big enough and it height is almost or even bigger than the browser window(and scroll bars appear), the red block is in the bottom of the page there is still gap between red div and end of the window in Firefox/Safari/Opera:
But in Explorer/Chrome everything is ok:
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">
root { display: block; }
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Tahoma;
background-color: blue ;
}
#container{
position: absolute;
left: 50%;
width: 961px;
height: 100%;
margin-left: -480px;
}
.infContainer{
position: relative;
padding-left: 19px;
background-color: white;
color: #434343;
}
div#footerCopyright{
position: relative;
bottom: 15px;
font-size: 0.75em;
background-color: red;
}
div#bottomFooterDivider{
height: 50px;
}
div#pageBottomDivider{
height: 35px;
}
</style>
</head>
<body>
<div id="container">
<div id="mainBlock" class="infContainer">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
</div>
<div id="footerCopyright">
<div id="bottomFooterDivider"></div>
</div>
</div>
</body>
</html>
How to solve this problem and have the same page without blue gap in Firefox/Opera/Safari.
Actual page: http://109.74.203.141/stack/1/tmp.html