I want the footer of an html page to never be higher than the bottom of the browser window. In other words, if there’s not enough content to fill a webpage, I want the footer to be at the bottom of the page (rather than hovering underneath the content).

See this example.

Assuming a standard html div layout, e.g.,

<div id="page">

  <div id="header">...</div>
  <div id="body">...</div>
  <div id="footer">...</div>

</div>

There is cross-browser approach to keep the footer at the bottom of the page. I have seen various approaches to this issue and all of them rely on a similar trick: First, enforce a min-height, and second, use margin/padding to position a fixed-height footer.

The cross-browser minimum height trick looks like this:

html, body {
    height: 100%;
}
#page {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

Non-IE (and newer IE) browsers will understand the min-height style, older versions require the height: auto !important; height: 100%; styles.

Next, we position a fixed-height footer. You can do this through a negative-margin that overlaps the body, or use position: absolute;. I prefer the latter approach as it looks cleaner. Either way, remember to pad the bottom of your body content so that the footer will never overlap actual content, e.g.,

#body {
    padding-bottom: 3em;
}
#footer {
    position: absolute;
    bottom: 0;
    height: 3em;
}

The footer height must be fixed, and the padding-bottom should be greater than or equal to the fixed footer height.

Putting it all together, please see this modified example which uses the following sticky footer css:

/* sticky footer */
html, body {
    height: 100%;
}
#page {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
}
#body {
    padding-bottom: 3em;
}
#footer {
    position: absolute;
    bottom: 0;
    height: 3em;
}