How To Place A Sticky Footer In React Using 3 Ways

By onjsdev

Jan 1st, 2024

Most websites are made up of main structures, including the header, content, sidebar, and footer. This article will specifically focus on the placement of one of these elements—the footer—in a React application.

Before we dive into that, let's first understand what the bottom sticky footer is and take a look at our React app layout.

What is Sticky Footer

The sticky footer is the structure at the bottom of the screen if the height of the content is less than the height of the screen, otherwise at the bottom of all its content.

You may think that a sticky footer is same as a fixed footer, however the fixed footer is always placed in the viewport even if the content height is taller than the viewport.

React App Layout

The layout structure is important for deciding which method to use to place the footer. Our react application layout has three main structures, header, content and footer. For simplicity's sake, each component will render its own name in a div container as in the example of code snippet below.

import React from "react"
// Header        
export function Header() {
  return <div>Header</div>;
}
// Content
export function Content() {
  return <div>Content</div>;
}
// Footer
export function Footer() {
  // We need to add a className to place the footer
  return <div className="footer">Footer</div>;
}
// App.js
import "./App.css";
import Content from "./components/Content";
import Footer from "./components/Footer";
import Header from "./components/Header";

function App() {
  return (
    <div className="App">
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

export default App;

3 Ways to Place Sticky Footer in React

Using FlexBox

Flexbox is a powerful way to place any element in an HTML document. You can easily place the footer using the flex column layout and margin-top: auto.

html,
body,
#root {
  height: 100%;
}
.App {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.footer {
  margin-top: auto;
}

Using Grid

The grid system is a great feature in CSS for creating complex structures. It can also be used to place a footer in a react application using the fragment size (1fr) for the content height and auto size for header and footer.

html,
body,
#root {
  height: 100%;
}
.App {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Using CSS calc() Method

If you have a footer with a constant height value, the calc() method can be anohter option for placing a footer in a react application. In the following example, our footer height is 100px.

.App {
  min-height: calc(100vh - 100px);
  position: relative;
}
.footer {
  position: absolute;
  bottom: -100px;
  height: 100px;
}

Conclusion

In this article, we have covered the placement of a bottom sticky footer in a react application using different methods including the flexbox, grid and CSS calc method, you can choose a method according to your requirements and design layout.

If you want to learn more about React, you can check the following articles:

Thank you for reading.