3 September 2010

This tutorial shows how you can make 100% height and width layouts with footer that stays always at the bottom of the page.

Making footer stick at bottom is easy enough, but there are loads of wrong guides out there. With long CSS codes that actually doesn't work. So I thought to make this tutorial and combine it with guide to making 100% size layout, becouse only then it's neccessary to use that kind of footer.

100% Layout:

I suggest to put CSS code allways in seperate file, but for this example it doesn't matter. First CSS line makes sure that html and body tags have no paddings, margins and the sizes are 100%. Second line makes divs borders visible. Then I made some divs, if you use floating divs use empty div with style attribute value of "clear:both".
Source code viewer
  1. <html><head><style>
  2. 	html,body{width:100%;height:100%;margin:0;padding:0}
  3. 	div{border: 2px solid #000}
  4. </style></head><body>
  5. 	<div>Header</div>
  6. 	<div>Menu</div>
  7. 	<div>Content</div>
  8. 	<div id="footer">Footer</div>
  9. </body></html>
Programming Language: HTML

Footer to Bottom of the Page:

To make this happen you have to change the CSS code. We gave the fooder div an id so we could assign some CSS to it.
Source code viewer
  1. #footer{bottom:0px;width:100%;position:fixed}
Programming Language: CSS

Some Facts:

This is just an example so most likely you want to edit the code. The footer has to have a fixed value. And last div that goes over it has to have padding whats the same height as the footer or last lines of content will be hidden behind the footer, because the footer is floating at the bottom. So you might have to play with paddings and margins abit to get the result you want.