Create a sticky footer

Here's what we'll cover:

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.

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>

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:

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:

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.