32

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

enter image description here

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'
An Nguyen
  • 770
  • 2
  • 12
  • 25

9 Answers9

57

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);
mwoelk
  • 1,182
  • 10
  • 14
  • 1
    That works correctly. Thank you again. Btw how can i make text 'No Result' at the center of screen? – An Nguyen Oct 05 '16 at 14:41
  • 18
    This solution isn't scroll friendly, When scrolled the footer is stuck to its initial position – Sanchit Bhatnagar Mar 06 '20 at 16:24
  • 3
    If you need a scroll friendly solution use position:fixed; to always keep it at the bottom. You may also need to add a z-index to keep it above other elements. – mwoelk Mar 06 '20 at 23:45
12

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

Ikechukwu Kalu
  • 1,474
  • 14
  • 15
8

One trick I believe everyone is missing here is that in React after html and body element, there is also a div with #root which encloses the entire content. Please refer to the image below.

enter image description here

So, it is required to make the height 100% of all 3 i.e. html, body and #root.

html, body, #root {
  height: 100%;
}

Then add these properties in #root:

#root {
 display: flex;
 flex-direction: column;
}

You must wonder that why this the #root needs to be flex and not the body. The reason is that it is the innermost parent or I should say the closest parent of the footer.

Now, finally just do this for the footer:

footer: { margin-top: auto }

What the above line does is it pushes the footer at the end of its parent. As simple as that. Nothing fancy here. No need to do any calc on height or change the position of footer.

Ankush Chauhan
  • 1,433
  • 2
  • 17
  • 22
5

It is important to have content wrapper and set its min-height to 100vh:

min-height: 100vh; (100% of the viewport height)

min-height: 100%; (100% of the parent's element height)

Look at here is very well explained and worked for me: https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551

Ginte Ezerskyte
  • 51
  • 1
  • 2
5

I would change the footer css as follows:

  position: fixed;
  left:0;
  bottom:0;
  right:0;

It is possible to have a position: absolute but it won't be scrolling-friendly.

benjdan
  • 169
  • 2
  • 6
3

flex-grow

Quite late to the party but my solution was:

<div className="layout">
  <Navbar />
    <main>
      {children}
    </main>
  <Footer />
</div>

.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout main {
  flex-grow: 1;
}
Tom Walsh
  • 119
  • 2
  • 12
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Neeraj Aug 24 '22 at 05:13
1

Are you trying to have a wrapper for your page so you can absolutely position the footer at the bottom? If so, you can create a new component with relative position for that and pass the others in as children and give your footer absolute positioning at the bottom.

ceckenrode
  • 4,543
  • 7
  • 28
  • 48
1

Wish I read it earlier. Here is the snippet for Ikechuk answer and note that now the footer also respect the margin (which may not in any other answers above):

html, body, div{
      height:100%;
      width:100%
      display:block;
    }
    footer{
      position:absolute;
      bottom:0;
      display:block;  
      width:100%
      
 }
 hr{
      display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
 }
<html>
<body>

<div style={"margin=5%;"}>
<div style={"position:relative"}>
<footer>
  <hr>
  I am footer
</footer>

</div>
</div>
</body>
</html>
guneetgstar
  • 621
  • 7
  • 15
0

Thank you, @mwoelk had the question answered. I just would like to make it clearer for the beginner.

Step 1 --- Footer css:

.Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}

Step 2 --- Wraper of Footer css: (Let's use React as an example, usually footer is wrapped inside .App. The reason for adding padding bottom is to avoid some part of the content is covered by Footer at the bottom if content is too long.)

.App {
  padding-bottom: 60px;
}
Joe
  • 21
  • 3