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 has a footer which I can\'t make sit at the bottom of the page.

I wa

Answer 1

Yet, another really simple solution is this one:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.

Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.