I have a crappy footer on this site at the moment. It is ‘sticky’ in the wrong way – it uses
position: fixed so it stays on screen always. My idea of a ‘sticky footer’ is more that it stays pushed to the bottom, regardless of the content above it.
I’m just using the default Bootstrap sticky footer. The Bootstrap code for it is this:
The common solution to the ‘sticky footer’ problem involve setting a fixed height to the footer, putting it just outside a wrapper that has a min-height of 100%, and giving the margin-bottom a negative value equal to the height of the footer and a padding-bottom equal to the height of the footer as well. This is the top google result for
sticky footer and it uses a similar method - effectively the same in concept, but slightly different in implementation.
The major problem with this is that someone might want to have a variable-height footer. For example, my footer is a
<p> element with some text that wraps to 2 lines on some screen sizes. I could mess about with using
@media queries to increase the height of the footer and the padding and margin of the wrapper, but that’s a lot of work and it means extra work every time you decide you want to change the content of the footer.
Flexbox gives us such a solution. Check out my demo. Resize the screen to see that it meets all the requirements set forth - automatically and naturally accomodates height-changes of content, stays at the bottom of the screen regardless of the size of the content above it, etc.
Here’s the most important html:
First, you must make sure that
div.content reaches the bottom; you can use
min-height:100% or, in the case of my demo, have it wrapped in a flexbox itself that forces it to take the full height available.
div.content needs to be set to
flex-direction:column. The footer doesn’t need any particular styling for this - just whatever you need for the look you want. The article,
.content > article, needs to be set to
flex-grow:1. This is what pushes the footer down to the bottom - if the article content isn’t long enough to push the footer to the bottom, the article will grow take up all the remaining vertical space until there isn’t any left.
Imo, this is a more flexible, more robust and simpler solution to how to acheive sticky footers. It doesn’t tie you in 3 places of the css to any particular height, the height changes as needed, and the css is fairly minimal and clean.