Quick Tip: The Best Way To Make Sticky Footers

Demo Download

While developing web layouts, at some point you've probably run into this issue:

broken_layout.png

This obviously broken layout happens when a footer is positioned statically at the end of the body, but the page doesn't have much content. There is nothing to push the footer down enough and it stays in the middle of screen, leaving a huge area of whitespace below it.

In this quick tutorial we're going to take a look at a modern technique for building footers that are guaranteed to stick to the bottom of the page at all times.

The Technique

To prevent the above from happening we will be building our page using flexbox, the most advanced tool CSS3 has to offer for building adaptive layouts. For those of you not familiar with the flexbox model and its properties, we will leave a couple of links at the end of the article.

Our simple demo page will have a header, main section, and a footer. Here is the HTML, nothing extraordinary there.

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

To enable the flex model we add display: flex to the body, and change the direction to column (the default is row, which is a horizontal layout). Also, the html and body will need 100% height to fill up the whole screen.

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

Now we need to adjust how much space each section will take up. We've done this via the flex property, which bundles together three flex- specs into one:

  • flex-grow - Defines how much of the available free space in the container goes to an element.
  • flex-shrink - How much an element will shrink when there isn't enough space for everything.
  • flex-basis - The default size for an element.

We want our header and footer to take up just as much space as they need, and everything else to be reserved for the main content section. The CSS for such layout looks like this:

header{
   /* We want the header to have a static height, 
   it will always take up just as much space as it needs.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

.main-content{
   /* By setting flex-grow to 1, the main content will take up 
   all of the remaining space on the page. 
   The other elements have flex-grow: 0 and won't contest the free space. */
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

footer{
   /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

To see this technique in action, check out our demo page by clicking the image below. Using the big pink button you can change the amount of content to help you observe how the layout adapts and pushes the footer to the bottom at all times.

correct_layout.png

Conclusion

As you can see flexbox is a powerful ally when building layouts from scratch. All mainstream browsers support it, with a few minor exceptions, so its pretty much safe to use it in all IE9+ projects - Can i use flexbox.

Here are a some awesome lessons and cheatsheats for learning more about the flexbox layout model:

  • A quick guide to flexbox by CSS-Tricks - here.
  • Solved by Flexbox, a website dedicated to cool flexbox techniques - here.
  • 5-minute interactive lesson - here.

We hope you liked our way of creating sticky footers and that you've picked up something new and useful from the article. Leave us a comment if you have a cool flexbox trick of your own!

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor

Related Articles

Comments 2

Just a quick note, your comment that all IE9+ browsers support this is misleading as IE9 does not support it at all and IE10, while supporting it, requires vendor prefixes. Unless using a polyfill, the comment should have read IE10+. Otherwise, thanks for the quick tip on a common problem.

Andrei Popa

Flexbox is definitely amazing, but, as Brian said, it won't cut it for < IE10.

For older browsers or just as a backup I use this technique
http://codepen.io/deioo/pen/pydaBV?editors=1100

Hope it helps.