Making footer stick to the bottom of the page
Problem for today, had a background which was applied on body which meant that the background titled all the way to the length of the document. The page had a footer which would appear where the content would end, which would make the background appear below the footer and make it look like something had gone wrong there.
Obviously a comment problem for people who wants to have a coloured footer and a fancy background. So here’s the solution I applied, after looking at the solutions available.
The markup.
1 2 3 4 5 6 7 8 | <div id="container">
<div id="content">
foo
</div>
</div>
<div id="footer">
content for footer
</div> |
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | html { height:100% } body { height:100% } #container { position:relative; min-height:100%; _height:100%; /* for IE6 as it doesnt understand min-height */ } #content { padding-bottom:100px; /* assuming your footer height is 100px */ } #footer { position: relative; margin-top:-100px; /* move the footer up negatively exactly the same height as the footer so that its back in the view and always appears to rest at the bottom of the page */ } |
Here’s what it looks like.
A relatively straightforward solution, the only slight problem with this is that you would require to know the height of the footer well in advance which means you cant have dynamic content for the footer. If I come across a problem like that and have to figure out a solution for that, I shall post it here.
Credits: http://www.themaninblue.com/writing/perspective/2005/08/29/
Note: Following a comment on stumble upon, I just wanted to ensure that the credit link from the “Blue Man” is actually there to ensure to give the credit where its due, this blog post is just a note to self so that when i encounter a similar problem i can look back at it or anyone else who has had a similar problem can look at back at it. I am not taking any credit for this solution, infact I think this idea has a flaw in the sense that if you dont know what the height of the footer is going to be , this might not work as expected
I would say that this should only be used in horizontal-scrolling sites. Otherwise it obscures content, and as we know, content is King.
E. Michael Martin
17 Jul 08 at 7:58 am
Is there a way to make the footer div always be at the bottom of the page, regardless of where the content is? so if i scrolled up, through content the footer will still be there and the content div would just go behind it?
ths
18 Jul 08 at 9:09 am
@ths I guess just use absolute positioning then and specify a z-index, though not sure how useful that is going to be.
rp
18 Jul 08 at 12:54 pm
nice stuff.
paresh
18 Jul 08 at 8:24 pm
My footer is inside my container divs and when I pulled them out, and tried this, I was not as successful. Cn your solution be modified to work if the footer is in the main container as well?
Cade
19 Jul 08 at 5:54 pm
A dynamic sticky footer would require some sort of Javascript or CSS-SSC type of system to create variable driven CSS sheets.
Xenostar
20 Jul 08 at 12:36 pm
THS - There is a way to do what you’re looking for. I’ve used it a couple times. It uses pure CSS with conditional comments (and an IE-proprietary property or two) to overcome WinIE shortcomings regarding fixed positioning. Check it out at: http://cookiecrook.com/bugtests/fixed.htm
Bundle
23 Jul 08 at 12:48 pm
Neat idea.
Orlando Villas
27 Jul 08 at 10:10 am
thanks, but I was looking for an idea for having it working for any height of the footer, the current solution only caters for when you know what height is your footer going to be off.
but surprisingly ever since I have posted it, the amount of times i have had to use it recently.
rp
2 Aug 08 at 6:07 am
That just makes sense lol. Great posting, thank you for the “to-do”.
Affordable Web Design
4 Aug 08 at 5:28 pm
Great thank you for tutorial..
Uzaktan Eğitim
16 Nov 08 at 8:42 am