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.

 

Split-screen Layout with FlexBox

From a UX perspective:

A split-screen layout is a full-screen web component that is segmented into two or more equal vertical columns. This type of layout is mostly used in minimalist designs for landing pages when we want users to easily focus on two or more selectable options.

From a development perspective:

A split-screen layout can be seen as a two-block layout. Both blocks varying on size and arrangement depending on the screen size.

On smaller screens: Both blocks tend to fill the entire screen and be stacked one on top of the other, forcing the user to see only one block at the time and intentionally pose an action to see the second block (scrolling or clicking an action button)

On larger screens: Both blocks tend to be visible at the same time, being side by side and occupying half of the viewport real estate.

Using Flexbox CSS module:

A split-screen is easily created in Flexbox by first creating a parent flex-container width two children blocks (split-layouts). Then, by playing with the parent flex-direction property to arrange the split layouts in a column (small screens) or in a row (large screens). Optionally, the split-screens can also be set as flex-containers in order to center their content vertically and horizontally, thus controlling the content’s presentation.

The code:

I’ve created a great pen that clearly details the process, you can see the demo right away or look at the code and preview for reference. Any of you had the opportunity to work with a split-screen layout? I would love to hear about it.

Thank you and happy coding!