While developing web layouts, at some point you’ve probably run into this issue:
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.
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:
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.
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:
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!
