CSS fix footer to bottom of page

For as long as I can remember, using CSS to fix the footer to the bottom of the page has always been an issue. Today in this blog I will show you how to make a sticky footer that works on all devices I have tested on.

Requirements

CSS3

Bootstrap 4.4.1

When we create a webpage, if we have very little text, you will find that the footer moves up the page, as you have clicked through to this webpage then I take it this is an issue for you.

In the past, we have used position absolute, footer position absolute and gave the footer a fixed height (which is not good really).

But with a bit of CSS3 magic, using Flexbox, we can position the footer to the bottom of the page.

CSS fix footer to bottom of page

If you copy and paste the code below into your webpage, and then view it in your browser, you will see how the footer sticks to the bottom of the page.

The main points to note are as follows:

  • HTML, Body - This has a height of 100%, do not use 100vh, as the footer looks OK on desktops, but viewed on IPad, or Samsung S7 Edge the footer is pushed down.
  • The footer has a class of mt-auto

Below is two images showing the footer at the bottom of the page using a height of 100% and 100vh

Footer in IPad

IPad CSS fix footer to bottom of page

Footer position IE11

Thank you for reading this blog about using CSS to position the footer at the bottom of the page, I hope you found it helpful.

Leave a comment

*
*

Comments

Worked for me while other solutions did not work and were not really responsive. Thank you !

Comment posted by Mister G on 22 Jun 2020 15:58

Hi Mister G Good to hear that the blog helped