2 Ways to Build a Sticky Footer (Flexbox and CSS Grid)

As CSS evolves rapidly with exciting new features, common layout tasks are made easier and easier. To prove it, in this short tutorial, we’ll cover two quick ways to create a sticky footer—a component that will sit at the page’s bottom no matter the page’s content height.

diagram to show the sticky footer behavior

Check the first version of our page that uses Flexbox for the layout (full page demo):

Please accept marketing cookies to load this content.

And here's its second version with CSS Grid (full page demo):

Please accept marketing cookies to load this content.

Be sure to view the demos from a tall screen and pay attention to how the footer sticks to the bottom of the page. You can also try to insert more content by hitting the Add Content button.

The Page Markup

The page markup will be pretty typical: a wrapper element that will include the page header, the page content, and the page footer like this:

<div class="site-wrapper">
  <header class="site-header">...</header>
  <main class="site-main">...</main>
  <footer class="site-footer">...</footer>
</div>

Of course, the body element could also work as the page wrapper, but I always prefer to leave this element with basic styling.

Our footer will include some widgets. Although we won’t discuss anything about them here, it’s worth noting that in an upcoming tutorial, we’ll use this demo and learn two ways to make the footer widgets dynamic with WordPress.

Using flexbox for a sticky footer requires the following actions:

We’ll make the page wrapper a flex container and give it a minimum height equal to the viewport height.
We’ll stack the flex items vertically—from top to bottom.
The main element will expand to cover the available space inside the flex container. To do it, we’ll give it flex-grow: 1. Remember that, by default, all flex items have flex-grow: 0.
Optionally to vertically center the contents inside the main element, we’ll also set it as a flex container and give it align-items: center.

Another way to vertically center the flex items is with auto margins.

Flexbox Align: When to Use Auto Margins Instead of Flexbox Center

George Martsoukos

21 Jan 2021

Here are the corresponding styles:

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

/*AUTO MARGINS - INSTEAD OF align-items: center*/
.site-main > * {
  margin-top: auto;
  margin-bottom: auto;
}

Using CSS Grid for a sticky footer requires the following actions:

We’ll make the page wrapper a grid container and give it a minimum height equal to the viewport height.
We’ll define the grid rows and their size using grid-template-rows: auto 1fr auto. That means that the page header and footer will be as tall as their content, while the main element will have a height equal to 1fr, so it’ll grow to occupy the empty vertical space.
Optionally to vertically center the contents inside the main element, we’ll set it as a flex container and give it align-items: center.

Both the flex-grow property and the fr CSS unit work similarly. The former distributes the remaining space inside the container among the flex items, while the latter distributes the remaining space inside the container among the grid rows/columns. One key difference is that we set the flex-grow property to the flex items while the fr unit to the grid containers.

Here are the corresponding styles:

.site-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.site-main {
  display: flex;
  align-items: center;
}

Conclusion

In this tutorial, we examined two ways of building a sticky (fixed) footer. The power of modern CSS allows us to create things like this with minimal effort and without polluting the markup with unnecessary stuff.

As discussed, in a newer tutorial we build on this demo and learn two methods to make the footer widgets dynamic in WordPress. Take a look!

As always, thanks a lot for reading!

Flexbox/CSS Grid Tutorials on Tuts+

Interested in more Flexbox and CSS Grid tutorials? Check out these resources below!

2 Ways to Build a Sticky Footer (Flexbox and CSS Grid)

Our Sticky Footers

The Page Markup

Sticky Footer With Flexbox

Sticky Footer With CSS Grid

Conclusion

Flexbox/CSS Grid Tutorials on Tuts+