css smart footer

This is short piece of css which allows you to create a page footer which will sit at the bottom of the browser window when the content is not long enough to force it to the bottom of the page but will still sit below the page content when the page has scrollbars (the method is used by this site).

View Example

1. Set the min-height for the html tag to ensure it always fills the browser window.html {
height: 100%;/*makes the html the full window height*/
}
2. Set the minimum height for the body tag to %100 and positioning value of ‘relative’ this will ensure that the footer, which is a child of the body, will use it as the reference area for absolute positioning. warning IE6 hack!
   
body {
min-height: 100%;/*sets the body to the window height*/
_height:100%;/*ie 6 hack - better in a specific stylesheet*/
position: relative;/*tells the footer to use the body the reference when setting position*/
}
3. Position to footer at the bottom of the body div#footer {
position: absolute;
height: 150px;
bottom: 0;
width: 100%;
left: 0;}

4. Finally, use whatever element proceeds the footer to create a space for the footer on top of which will never contain content.
div#primary {
padding-bottom: 200px;/*creates space at the bottom of the main content the same height as the footer to prevent anything from disappearing behind it*/
}


Tested in windows:

• firefox
• ie 6
• ie 7
• opera
• Safari

(any results from Mac users greatly received)

edit 02/02/08
alternate solution at dave-woods.co.uk

This entry was posted on Thursday, January 24th, 2008 at 9:28 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.