Create a sticky footer

Here's what we'll cover:

• How to use the display: grid declaration to create a grid
• How to define rows in a grid by using the grid-template-rows property

A popular layout pattern in web design is the sticky footer. It keeps the footer of a website at the bottom of the viewport or content area, no matter how much content is on the page. This pattern creates a consistent user experience and helps anchor important information, like copyright notices, contact links, and legal disclaimers.

At first, implementing a sticky footer may seem tricky, but with modern CSS techniques, it's actually pretty easy. In this post, we'll show you how to create a sticky footer using CSS Grid.

HTML markup

Before we dive into creating a sticky footer, let's take a closer look at the HTML markup of our container.

Our layout consists of three main elements: the header, main content, and footer. These elements are wrapped inside a container div, which acts as the parent element for all of them.

<div class="container">
    <!-- The header -->
    <div class="container__header">...</div>

    <-- The main content -->
    <div class="container__main">...</div>

    <!-- The footer -->
    <div class="container__footer">...</div>
</div>

Create a sticky footer with CSS flexbox

Before diving into CSS grid, let's use the trusty old CSS flexbox to create a sticky footer.

To start, we wrap all the layout elements inside a container div, which acts as the parent element. In the CSS code, we set the display property of this container div to flex, which allows us to use flexbox properties to align its contents.

By setting the flex-direction property to column, we ensure that all the child elements (header, main content, and footer) are stacked vertically on top of each other. Then, we set the height of the container to 100vh to make sure it takes up 100% of the viewport height.

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

To achieve a sticky footer effect, we can set the flex-grow property of the main content area to 1. This ensures that the main content area expands to fill any remaining space in the container after the header and footer have been positioned. With this property, the footer will stay at the bottom of the viewport or content area, no matter how much content is on the page. Without it, the footer would appear right after the main content, which is not what we want.

.container__main {
    flex-grow: 1;
}

Check out the demo below:

Using CSS grid

In addition to using CSS flexbox, we can also use CSS grid to achieve the same layout. Both techniques require setting the container's height to 100vh to ensure it takes up the full viewport height.

With flexbox, we set the display property to flex and the direction to column to stack child elements vertically.

With grid, we use the display property set to grid. This allows us to use grid-specific properties like grid-template-rows to define explicit rows for our grid. By setting it as auto 1fr auto, we define three rows where the first and last rows adjust to the height of their contents, and the second row takes up any remaining space in the container.

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

Check out the demo below to see how the footer is pushed to the bottom when the main content is short:

And don't worry, when the main content is long and the container has overflow, users can scroll to the bottom to see the footer as usual:

Conclusion

In this post, we've explored two ways to create a sticky footer for your website. The first method used CSS flexbox, where we set the height of the container to 100vh and defined its display property as flex. Then, we used flex-grow to ensure that the main content area takes up any remaining space in the container once the header and footer have been laid out.

The second method used CSS grid, where we defined explicit rows for our grid using grid-template-rows and set it as auto 1fr auto. This ensured that the main content area takes up any remaining space in the container once the header and footer have been laid out.

Both techniques are effective in creating a sticky footer, but CSS Grid provides more flexibility in defining explicit rows for our layout.

By implementing a sticky footer on your website, you can provide a consistent user experience and anchor important information at the bottom of your page.

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

• DEV
• GitHub
• Website