Forcing Footer Stay At The Bottom?
I have no containers, no wrappers.
I simply have a layout like so...
<body>
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div class="clear"></div>
<div id="footer">
</div>
What I am wanting to do is to make sure the footer always stays at the bottom of the screen whether I have content that goes pretty far down and or even not enough content to go all the way to the bottom of the screen.
As of right now, I can get either two of the ways listed above to work, but I want both to work.
Here is the CSS I have set-up for this.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
I am aware that if I apply a min-height: 100%; to the HTML Element within the CSS Document that will go as the content goes, but if I do not have any content, per se, it will not stick at the bottom of the screen. Resolution regardless.
I have ran into this problem multiple times, and never am quite sure how to figure it out. So, some help would be much appreciated, along with some explanation.
Thank you so much everyone for your help!
Answer
use this mate, it's a really well explained and easy to follow tutorial:
http://code.google.com/p/cleanstickyfooter/
Best sticky footer ever works really really well
Quote from the site (and I agree completly):
The Difference
Google "sticky footer", I have listed below why this technique works better than the top results from this search.
http://ryanfait.com/sticky-footer/ - This technique is similar, but cleanStickyFooter takes it much further. The technique located here doesn't play nicely when you want to make your footer have a width of 100%.
http://www.cssstickyfooter.com/ - This technique is one out of many I am referring to when I say its invasive with CSS clearing hacks.