Footer to bottom of page

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:

Footer Before
Footer Before

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!

Footer After
Footer After

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.

4 thoughts on “Footer to bottom of page

  1. If you have a lot of text in your footer then it’s also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there’s nothing to worry about – just set your footer height to a pixel value and away you go.

  2. On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space.

Leave a Reply

Your email address will not be published. Required fields are marked *