React page keep footer at the bottom of the page

You need to tell your footer to position itself to the bottom of the surrounding container:

Footer css:

position:absolute;
left:0;
bottom:0;
right:0;

And for the container (the react-root div):

padding-bottom:60px;

As an alternative (if you don't need to support IE 8) you could try this style on the div.container :

height: calc(100% - 60px);

For any other person the above solutions do not work for, you could try the following steps:

Give the parent div a non-static position such as relative (remember the default position is static)
Give the parent div a minimum height of 100vh; this enables it to take up all available space vertically
Then for the footer (child), which should be wrapped in a div if not one, give it the following properties; position: absolute; bottom: 0; width: 100%.

UPDATE: In some cases, setting the footer div position to absolute may not work. In such a case, use relative instead.

Hopefully, the steps above should fix it :-)

Related