Make footer stick to bottom of page correctly

Question

I am trying to have my footer (just a div with a line of text in it) be at the bottom of the screen if the content doesn't go all the way to the bottom, or be at the bottom of the content if the content requires scroll bars. If the content doesn't require scroll bars, it works perfectly, but when the content is too long, the footer is still in the same spot, sitting right on top of the content.

My basic div structure is:

>div id="container">
    <div id="body"></div>
    <div id="footer"></div>
</div>

My corresponding CSS (stripped down somewhat):

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}

Answer 1

You will need slightly more complex HTML to do what you want:

http://ryanfait.com/sticky-footer/

Answer 2

An alternate solution, with no empty DIVs:

http://www.cssstickyfooter.com/

Answer 3

Why not using: { position: fixed; bottom: 0 } ?