How to Make a Sticky Footer in React

How to make a sticky footer in react?

Here's an idea (sandbox example link).

Include a phantom div in your footer component that represents the footer's position that other dom elements will respect (i.e. affecting page flow by not being position: 'fixed';).

var style = {
    backgroundColor: "#F8F8F8",
    borderTop: "1px solid #E7E7E7",
    textAlign: "center",
    padding: "20px",
    position: "fixed",
    left: "0",
    bottom: "0",
    height: "60px",
    width: "100%",
}

var phantom = {
  display: 'block',
  padding: '20px',
  height: '60px',
  width: '100%',
}

function Footer({ children }) {
    return (
        <div>
            <div style={phantom} />
            <div style={style}>
                { children }
            </div>
        </div>
    )
}

export default Footer

React / Partially sticky footer

try checking if you are at the bottom of the page and conditionally hide and show your footer.

const App = () => {
  const [isBottom, setIsBottom] = React.useState(false);

  const handleScroll = () => {

    const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight

    if (bottom) {
      setIsBottom(true)
    } else {
      setIsBottom(false)
    }

  };
  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll, {
      passive: true
    });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
     <div>content.....</div>
    <footer className={isBottom ? "showFooter" : "hideFooter"}>M</footer>
    )
};

How to make sticky footer with FlexBox and react

First of all, good luck :) If your "stickyness logic" isn't as simple as "just stay always to the bottom" you're going to have to start listening to scrolls and resizes...

Anyway, I needed a Sticky component for my react app, and this is how it worked for me. It's react-dom so a bit different but as far as CSS is concerned it should be fine.

First, set its parent element to have position: "relative", which will allow its children to be position absolutely based on the parent.
This parent element should wrap around all of your available area.
So you parent View component's style is almost ok, just add flexBasis: 0 if it's not already occupying all of the available area, and position: "relative".

Set Sticky component itself (child View) to display: "block", have position: "absolute", and overflow to anything but visible. And techincally, it's sticky already.
Then add bottom: 0 to your sticky, and your component should already be sticking to the bottom - now you just have to manage its width and horizontal position, with any property or tool you like.

I tried to solve this with flexbox rules only, but it seems like the best way to approach this is position="relative" and position="absolute"

You should also note that after this, the really fun part of Sticky boxes starts, because based on the actual location of your sticky you may have to add some js to handle special cases. Example: now the sticky box will cover your content, I think. Additional white space should be added to the bottom of the page so that you can actually scroll down enough to see the bottom of your content.

Additional note: I know if you combine display: "flex" and position: "relative", it's handled in a peculiar way. Not sure what exactly is different, but block and flex behave a bit differently when assigned position="relative". If you see weirdness in your layout, try adding a wrapper between your flex view and block sticky, a block/relative wrapper, to normalize behaviour.

My classes simplified, this was for a sticky sidebar:

.StickyBox {
  overflow: auto;
  position: absolute;
  height: inherit;
}

.sidebarWrapper {
  flex: 1;
  position: relative;
}

Sticky footer for react with react-router-dom

I ran into a way better solution for working with a sticky footer around react-router-dom using flex-box.

App.js:

  <div id="container">
    <Header loaded={loaded} />
    <div id="main-content">
      <Switch>
        <Route
          path="/about"
          render={props => <About loaded={loaded} {...props} />}
        />
        <Route
          exact
          path="/"
          render={props => <MainPage loaded={loaded} {...props} />}
        />
        <Redirect to="/" />
      </Switch>
    </div>
    <Footer />
  </div>

app.css

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

#main-content {
  flex: 1;
}

I hope this will help someone in the future.

How to make sticky footer with react native scrollview?

You should move out the MyStickyFooter component from your ScrollView.

You should have something like this:

<View style={....}>
  <ScrollView>
     ... components
  </ScrollView>
  <MyStickyFooter/>
</View>

React page keep footer at the bottom of the page

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

How to fix footer at the bottom of a component in react?

There's a couple solutions here. Instead of bottom: 0 use:

margin-top: 100vh;

This will set the footer at the bottom of the viewport height.

However, your page has quite a few layout issues, and this is really a band-aid. You should consider utilizing flexbox, min-height, or grid to create a sticky footer.

That being said, the solutions for this using react are what they would be in most any circumstance.

The following solutions are preferable because they are "true" dynamic sticky footers. Meaning, the footer stays at the bottom until the main content extends beyond that area, at which point the footer will begin adjusting its position downward:

The min-height Solution

nav {
  height: 40px;
  padding: 10px;
  background: lightblue;
}

main {
  padding: 20px;
  background: purple;
  min-height: calc(100vh - 170px);
}

footer {
  background: magenta;
  padding: 10px;
  height: 50px;
}

<html>
<body>
  <nav>
    Navigation
  </nav>
  <main>
    Page content
  </main>
  <footer> 
    Footer that stays put
  </footer>
</body>
</html>

---

Related Topics