Photo by Jamison McAndie _ Unsplash

Sticky Footer with FlexBox

Introduction:

When a page has very little content or is seen on a very large monitor, chances are there might be not enough content to push the footer all the way to the bottom. This creates an often unpleasant empty space below the footer. Today, I would like to share my idea about creating a sticky footer with Flexbox (and make good use of the “flex-grow” property).

 

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container (w3schools).

 

The thought process:

We usually have three major components on the page, the header, main content, and footer. The process can be broken down in the following steps:

  1. We wrap these components with a flex container that occupies the entire layout’s height (min-height to 100vh)
  2. We place the flex container‘s children in a column (flex-direction tocolumn”)
  3. And finally, we set the main content to fill the page’s empty space (flex-grow to 1)

The final step will make the main content’s height grow and push the footer to the bottom, thus getting rid of that bottom empty space.

Here is some code sample:

 

.page-wrapper{
  display: flex;
  flex-direction: column; //place direct children in a column
  min-height: 100vh; //fill the entire layout
}

.main-content{
  flex-grow: 1; //grow to fill the layout empty space relative to the other components
}

 

Conclusion:

This wraps up today’s article. We talked about one possible way of creating a sticky footer with Flexbox and outlined the main steps of such a technique. The complete code and  live version are available for your reference, feel free to share your impressions with me about this article or any work you had to do in the past with sticky footers.

Thank you.

 

Published by

Eric Njanga

Web front-end developer passionate about finding the most efficient workflow for creating the most effective user-interfaces. His dream is to become a front-end instructor. wlayouts@gmail.com / https://ca.linkedin.com/in/ericanjanga

  • David Enke

    Nice one, this is really a state of the art approach.

    • Thank you! Please subscribe to our mailing list for more updates.