Sometimes, we want to make a sticky footer in React.

In this article, we’ll look at how to make a sticky footer in React.

How to make a sticky footer in React?

To make a sticky footer in React, we can set the position CSS property of the footer element to fixed.

For instance, we write:

import React from "react";

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

export default function App() {
  return (
    <div>
      <div style={style}>hello</div>
    </div>
  );
}

We set the style prop of the footer div to an object that has the position property set to 'fixed'.

Also, we set the bottom property to '0' to keep the footer div at the bottom.

And we add additional style properties to style the footer div the way we like.

Conclusion

To make a sticky footer in React, we can set the position CSS property of the footer element to fixed.