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:

• one wrapper div around the footer only,
• no need to manually set the height of the footer,
• CSS3.

Cons:

• limited browser support,
• extra markup.

Browser Support:

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;
}