Keeping HTML footer at the bottom of the window if page is short

Question

Some of my webpages are short. In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). That looks ugly. I\'d like

Answer 1

Check out this site. He has a good tutorial on how to do this with css.

I copied his css just in case Matthew's site is taken down.

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

EDIT

Since the height of the footer is different from page to page, you could get the height of the footer and then adjust the #body padding-bottom with javascript. Here is an example using jquery.

$(function(){
    $('#body').css('padding-bottom', $('#footer').height()+'px');   
});