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

Caveatrob picture Caveatrob · Mar 13, 2009 · Viewed 1.1M times · Source

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

I want the footer to

  • stick to the window bottom when the page is short and the screen is not filled, and
  • stay at the document end and move down as normal when there is more than a screenful of content (instead of overlapping the content).

The CSS is inherited and befuddles me. I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.

Answer

Jon Winstanley picture Jon Winstanley · Mar 27, 2009

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

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