Sticky footer in React.js

Question

I want to add footer in react which is tuck to the bottom of the page(not position: fixed ) when content is more I should see footer after scrolling till end and if content is less then it should display at the bottom. How to do it in React.js?

https://stackoverflow.com/help/how-to-ask – Yury Tarabanko Aug 19 '17 at 06:45 — Yury Tarabanko, Aug 19 '17 at 06:45

score -1 · Answer 1 · answered Aug 19 '17 at 06:51

-1

This can be done by making your footer a component and giving it the class as described here

answered Aug 19 '17 at 06:51

Shubham Jain

930
1
14
24

score -1 · Answer 2 · answered Apr 24 '21 at 17:38

You can use CSS do the trick with the power of flexbox and min-height. Basically, a .wrapper for your container having minimum height of 100% of the vertical height, ie: 100vh, then the children components or elements (eg. .navbar, .content and .footer) sharing the height, you can make the .content assume the remaining height of the .wrapper while the other components assume the size of themselves, see below snippet for solution.

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 1 0%;
  background-color: whitesmoke;
}
/* You can ignore the styling below */
.app {
  font-family: sans-serif;
}
.footer, .navbar, .content {
 padding: 20px;
 text-align: center;
 border: 1px solid rgba(0,0,0,0.1);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Landing Page Flexbox Layout With Navbar Full Height Content And Footer Sticky To The Bottom</title>
</head>
<body>
    <div class="app wrapper">
        <div class="navbar">
        Navbar
        </div>
        <div class="content">
          <h1>Content</h1>
          <h2>Takes remaining height and grows if needed!</h2>
        </div>
        <footer class="footer">
        Footer
        </footer>
      </div>
</body>
</html>

You can read more about flexbox here: W3schools CSS Flexbox

You can also play around with this sandbox I created for ReactJS applying the above styles: Codesandbox

score -3 · Answer 3 · answered Aug 19 '17 at 17:40

-3

The behaviour you need looks exactly like the sticky position in css.I recommend using pure css here:

footer{
    position: sticky;
}

See more here

answered Aug 19 '17 at 17:40

Bogdan

87
7

`position: sticky`will keep the footer visible all the time, that'Äs not what Ark tried to achieve – patreu22 Nov 30 '19 at 14:54

Sticky footer in React.js

3 Answers3