We need the page footer to be at the bottom of the page. However, it should not always stick to the bottom of the page either i.e. when there is more than one page worth of content.
Thanks to flexbox, this is not so hard after all.
This is a neat CSS to make the footer of a page stick to the bottom of a page when its contents are not sufficient to push the footer down by itself.
For instance, let’s say we have a short blog post that does not cover even one page, like this one:
Add this piece of CSS:
body, div#page { /* Will not work on IE if body is ommitted */
display: flex;
flex-direction: column;
min-height: 100vh;
}
div#content {
flex-grow: 1;
}
Aaand…… We are done!
Without CSS3 Flexbox, this sort of stuff can cause a slight headache.
The above code was tested and found to be working on Chrome, Firefox and IE.
Hope you find this useful.
Leave a Reply