CSS to make HTML page footer stay at bottom of the page with a minimum height but not overlap the page

Question

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that contains a footer which I can't make sit at the bottom of the page.

I want the footer to

When the page is short and the screen is empty, stick to the bottom of the window, and

When there is more than a screenful of content, stay at the document's end and progress down as usual (instead of overlapping the content).

The CSS is inherited, and it perplexes me. I can't seem to adjust it properly to place a minimum height on the content or make the footer move to the bottom.

Answer 1

A simple solution is to make the body 100% of your page, with a min-height of 100% as well. If the height of your footer does not alter, this works perfectly.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}