CSS3 sticky footer

The problem

In the world of big screens and full-screen browsers, pages with too few content can look awful:

Non sticky footer

Saw that, ha? Blank page bottom with a footer dangling in the middle of a page. Horrible!

The solution

Happily, in the era of HTML5 almost everybody stopped asking about IE6-IE8 support, so simple cross-browser sticky footer is easy to make. It’s often called the Sexy Kind or the Genghis Khan footer.

CSS chunk:

<style>
  html { position:relative; min-height:100%; }
  body { margin:0 0 80px 0; } /* footer height + reset body margins */
  footer { height:80px; position:absolute; bottom:0; width:100%; }
</style>

HTML chunk:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sticky Footer Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <header>...</header>
    <article>Some short content</article>
    <footer>I'm sticky now!</footer>
  </body>
</html>

 Where the magic happens

The most important rule here is html { position:relative }. All it does here in this very example – it makes <html> block to behave as a container, where you can set absolute positions for the other child containers (for the <footer>). Without this rule, footer { position:absolute; bottom:0;  } rule will put the footer in the bottom of the window (always visible on top of all content), but not in the bottom of html container! And of course, min-height:100%makes the html container long – to fill the whole window height, no matter how much content we have inside.

The rest is pretty much self-explanatory – absolutely-positioned footer occupies 80px of height in the bottom and body receives 80px of margin-bottom correction (or a bit more to leave some space between a content and a footer), so that the main content sitting inside body (header, article, etc.) won’t overlap with the footer. Don’t forget about setting the footer width or set left:0 or right:0 if you prefer a copyright note in the corner.

Looks much better now:

Sticky footer

 

And if there is a lot of content – sticky footer still behaves normally, creating a vertical scroller and staying in the page bottom (not in the window bottom):

Sticky footer long page

 Demo

Demo page is available – sticky footer preview. Check it out.

 Links
  1. HTML blocks properties and positioning (position:relative guide) [ru]
  2. More popular post about the same – CSS sticky footer
  3. Old sticky footer technique (for IE7 and old browsers)
  4. Stack overflow discussion