I am facing a peculiar issue with regards relative positioning of a center div and whitespace below the footer.
Here is the basic framework
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
body {
min-height: 100%;
background: none;
}
#header {
position: absolute;
top: 0;
width: 100%;
background:#F00;
}
#maincontainer {
position: relative;
float: none;
top: 200px;
width: 100%;
height: auto !important;
z-index: 1000 !important;
display: block;
clear: both;
margin: 0 auto;
background:#900;
}
#footercontainer {
width: 100%;
clear: both !important;
position: absolute;
bottom:0; left:0;
display: block;
float: none;
background:#F00;
}
</style>
</head>
<body>
<div id="header">
<p>test header content</p>
<p>some more content</p>
</div>
<div id="maincontainer">
<div id="containermaininner">
<div id="innerleft">
<p>some test content </p>
<p>some test content </p>
<p>some test content </p>
<p>some test content</p>
<p>some more content</p>
</div>
<div id="innerright"></div>
<div class="clear"></div>
</div>
<div id="footercontainer">
<p>test footer content</p>
<p>more footer content</p>
<p>more footer content</p>
</div>
</div>
</body>
</html>
I already have the code for body and html set at height:100%, margin and padding 0.
Now the #maincontainer has position: relative and top= 200px;
Hence, the issue occurs that after the footer there is around 200-220 px of white space and due to this the footer looks somewhere in between.
I even tried position fixed and absolute for maincontainer but doesnot seem to work.
I also tried sticky footer options but even that leaves same amount of white-space and hence I feel that the maincontainer positioning is the cause due to which the 100% height is getting
Is there anyway to make the footer stick to the bottom of the page (not the browser window) so that no further scrolling is there after the footer. Right now after the footer there is around 200-220 px of white space and a user can scroll the browser window down even after the footer.
Thanks for all the help