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.