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

css footer
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;
}

Related questions

Make div stay at bottom of page's content all the time even when there are scrollbars

CSS Push Div to bottom of page Please look at that link, I want the opposite: When the content overflows to the scrollbars, I want my footer to be always at the complete bottom of the page, like Stack Overflow. …

Read More
Flushing footer to bottom of the page, twitter bootstrap

I am generally familiar with the technique of flushing a footer using css. But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. …

Read More
How to use HTML to print header and footer on every printed page of a document?

Is it possible to print HTML pages with custom headers and footers on each printed page? I'd like to add the word "UNCLASSIFIED" in Red, Arial, size 16pt to the top and bottom of every printed page, regardless of the …

Read More