Sticky Footers, flexbox style!

I came to the inevitable point in any design, sticky footers. Simple, right? I’ll just hit up Google, well that looks promising. Just add height: xxpx… how about… may Krishna have mercy on our souls. Solved by Flexbox?! Neat! All I have to is wrap my entire body, sans footer, in a <div>; and we were doing so well.

Could we do it better? Some more Googling lead to A Complete Guide to Flexbox. Some brainstorming, and all important trial and error, later and I had a masterpiece.

Pros:

Cons:

Browser Support:

BrowserVersion
Chrome21+
Opera12.1+
Firefox22+
Safari6.1+
IE11+

Until someone tells me otherwise, this is officially[1] the worlds best sticky footer. This is the very future of sticky footers.

<h1>Body content goes here</h1>

<div class=wrapper>
	<footer>
		<h2>Hey look, sticky footer!</h2>
		<h3>The footer can be <em>any</em> height you want.</h3>
	</footer>
</div>
body {
	margin: 0;

	display: flex;
	flex-direction: column;

	min-height: 100vh;
}

.wrapper {
	flex: 1;

	display: flex;
	flex-direction: column-reverse;
}

  1. Officially endorsed by The Ministry of Silly Walks. ↩︎