Sometimes, we want to keep the page footer at the bottom of the page with React.

In this article, we’ll look at how to keep the page footer at the bottom of the page with React.

Keep the Page Footer at the Bottom of the Page with React

To keep the page footer at the bottom of the page with React, we can make the set the position of the footer element to fixed.

And we set the position of the footer to be at the bottom of the page.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div>
        {Array(200)
          .fill()
          .map((_, i) => (
            <p key={i}>{i}</p>
          ))}
      </div>
      <div
        style={{
          position: "fixed",
          left: 0,
          bottom: 0,
          right: 0,
          backgroundColor: "green"
        }}
      >
        footer
      </div>
    </>
  );
}

to add a long list of items and a footer below that.

We set the style prop of the footer to an object with position set to 'fixed'.

And we set left, bottom, and right all to 0 to always keep it at the bottom of the page.

Now when we scroll up or down, we should see the footer stay at the bottom of the page.

Conclusion

To keep the page footer at the bottom of the page with React, we can make the set the position of the footer element to fixed.

And we set the position of the footer to be at the bottom of the page.