Flexbox Sticky Footer

Back in the days of floats and jQuery there were all sorts of hacks that were used to stick your footer at the end of the page if your content didn’t push it to the bottom.

But flexbox solves that pretty easily in just a few lines of CSS.

Suppose your page has an HTML structure like so:

<!doctype html><html lang="en">
<head>
<!-- head content -->
</head>
<body>
<header>
<!-- header content -->
</header>
<main>
<!-- page content -->
</main>
<footer>
<!-- footer content -->
</footer>
</body>

And you want your footer to stick to the bottom of the page regardless of the content of main. All you have to do is the following.

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin: auto auto 0 auto;
}

Pretty simple right? No manually assigning heights to your header, main or footer — no checking the height of the page in javascript it just works.

Here’s a simple codepen: https://codepen.io/paynoattn89/pen/XerevL