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:
- 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:
Browser | Version |
---|---|
Chrome | 21+ |
Opera | 12.1+ |
Firefox | 22+ |
Safari | 6.1+ |
IE | 11+ |
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;
}
Officially endorsed by The Ministry of Silly Walks. ↩︎