React page keep footer at the bottom of the page

Question

I have a problem when try to fix footer at bottom of the page as below picture:

Although I google and see many suggestions, but I'm still facing the problem. I suspect this problem is <div data-reactroot></div> cannot be set height 100% as its parents. Could anyone help me?

Thanks in advance!

Update: Style of footer:

borderTop: '1px solid #ddd', height: '60px', lineHeight: '60px', backgroundColor: 'white' 

Answer 1

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); 

Answer 2

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

1. Give the parent div a non-static position such as relative (remember the default position is static)
2. Give the parent div a minimum height of 100vh; this enables it to take up all available space vertically
3. 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 :-)