Sometimes when designing a web page, you just want that footer to stick to the bottom of the window, even when your page is thin on content. I don’t mean permanently as you scroll, but on those pages where due to a lack of content there is no vertical overflow, and so you’d like the footer to actually remain at the ‘foot’ of the browser window. Not freely hiking up to the middle of your page, uninvited!
Well, the clever chaps over at CSSStickyFooter.com have devised a way to do this more cleanly than the ’solutions’ of the past.
As you can see in this quick example, due to the sparse content on the page, the footer has decided to wander up the page leaving a gap beneath
This looks a bit messy. However, it easily be fixed and become…
The footer has now rooted itself to the foot of the browser window, regardless of the page's content.
Why is this solution better than others?
- Works in all major browsers. Chrome, Firefox 2/3, IE 6/7/8, Opera 9/10, Safari… and loads more. Full list of browser support.
- Works with columned CSS layouts.
- No overlaps in resized windows.
- No empty ‘push’ div clogging up your code.
Okay, so how do I do it?
Full credit here of course goes to those chaps at CSSStickyFooter.com.
I will only include the raw HTML/CSS code here, however you can get the full instructions over at the CSSStickyFooter website.
The HTML
The CSS
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin:0;
padding:0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body, #wrap {
height: 100%;
}
body, #wrap {
height: auto;
min-height: 100%;
}
#main {
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
