I've been attempting to incorporate the CSS Sticky Footer technique demonstrated at cssstickyfooter.com. (I also experimented with Ryan Fait's solution without success).
I believe I've followed all the instructions correctly. I have a container div, a logo bar (referred to as header), a page div (known as main), and a footer.
Here lies the issue - if I enable overflow:auto, I end up with a short div and an undesirable scroll bar. However, if I disable it, my content displays properly but the page still considers the div to be the same size as if overflow:auto was enabled.
The rest of the functionality works as expected. The footer stays at the bottom and stops resizing at the shorter main/page div. Is there a way to make it stick to the bottom of the content? It's worth mentioning that I can't set a fixed height for the main/page div as it needs to adjust based on the size of the contained divs (whichever one is visible).
It might not just be the footer causing the problem, but regardless, any assistance in troubleshooting this would be greatly appreciated.
HTML:
<body>
<div id="container">
<div id="logo">
<div id="home-flower"></div><!-- end home-flower -->
<div id="about-flower"></div><!-- end about-flower -->
<div id="proof-flower"></div><!-- end proof-flower -->
<div id="contact-flower" ></div><!-- end other-flower -->
</div><!-- end logo-->
<div id="page">
<div id="spacer"><br/></div><!-- end spacer -->
<div id="home">home</div><!-- end home -->
<div id="about">about</div><!-- end about -->
<div id="proof">proof of concept</div><!-- end proof -->
<div id="contact">contact</div><!-- end contact -->
</div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>
CSS:
* {
margin:0px auto !important;
}
html, body {
height:100%;
}
#container {
width:800px;
background-color:#F0F;
min-height: 100%;
height: auto !important;
height: 100%;
}
#page{
width:100%;
min-height:100%;
position:relative;
background-color:#F00;
padding-bottom:75px;
/*overflow:auto;*/
}
#logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#footer {
position:relative;
margin-top:-75px;
width:800px;
height:75px;
background-color:#C0F;
clear:both;
}
#spacer {
position:relative;
line-height:20px;
}