Since I’ve been in the game, front-end devs have been wrestling with sticky footers like it was going out of style. I’m no exception, but today I learned a trick that made things a lot easier.
Before we go on though, I’d like to explain the problem briefly. It’s common for websites to have a header, a content section and a footer. On pages with a lot of content, the content takes up enough vertical space to push the footer to the bottom of the browser window. But, on pages with little content, sometimes the content does not take up enough vertical space to push the footer to the bottom of the window. This leaves the footer sitting oddly in the middle of the screen.
There are several solutions, each with their own pros and cons.
The Old Way
display: table Trick
My new favorite approach to the problem looks something like this:
The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using
display: table-row. Often
margin, etc. don’t behave as expected. This is easy enough to work around by adding a
<div> or something inside the
.page-row and styling that:
Why not Flexbox?
As I understand it, Flexbox handles sticky footers very well. If you’re in a position to be able to use Flexbox without worrying about browser support, go for it!