CODEWITHSUNDEEP
javascripthtmlcssreactjs
An Nguyen
An Nguyen

Reputation: 800

React page keep footer at the bottom of the page

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'

Upvotes: 34

Views: 134396

Answers (12)

kukuruku
kukuruku

Reputation: 1

here is my solution:

  1. you need first wrap your App component in container:
ReactDOM.createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <div className="container" >
    <App />
    </div>
  </Provider>
);

with ccs styles:

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
  1. second step add to your footer margin-top: auto;

Upvotes: 0

jay padaliya
jay padaliya

Reputation: 704

Use flex

html, body, #root {
    min-height: 100vh;
}
#root {
    display: flex;
    flex-direction: column;
}
header, footer {
    flex: 0 0 auto;
}
#content {
    flex-grow: 1;
}

Upvotes: 0

Hasan Uddin
Hasan Uddin

Reputation: 492

use this CSS class for the Footer

.c-mt-auto {
  margin-top: auto;
}

and this for the container <div> that contains the body and the Footer

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

Upvotes: 0

Joe
Joe

Reputation: 39

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

Upvotes: 0

Tom Walsh
Tom Walsh

Reputation: 129

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

Upvotes: 3

benjdan
benjdan

Reputation: 189

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.

Upvotes: 7

Ankush Chauhan
Ankush Chauhan

Reputation: 1603

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.

Upvotes: 9

guneetgstar
guneetgstar

Reputation: 652

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>

Upvotes: 1

Ikechukwu Kalu
Ikechukwu Kalu

Reputation: 1634

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

Upvotes: 12

Ginte Ezerskyte
Ginte Ezerskyte

Reputation: 71

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

Upvotes: 7

mwoelk
mwoelk

Reputation: 1271

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

Upvotes: 62

ceckenrode
ceckenrode

Reputation: 4703

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.

Upvotes: 1

Related Questions