React page keep footer at the bottom of the page

Issue

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'

Solution

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

Answered By - mwoelk