loading...
Cover image for Keep the Footer at the Bottom: Flexbox vs. Grid

Keep the Footer at the Bottom: Flexbox vs. Grid

5t3ph profile image Stephanie Eckles Updated on ・3 min read

Modern CSS Solutions to Old CSS Problems (20 Part Series)

1) Keep the Footer at the Bottom: Flexbox vs. Grid 2) Equal Height Elements: Flexbox vs. Grid 3 ... 18 3) CSS-Only Full-Width Responsive Images 2 Ways 4) Pure CSS Smooth-Scroll "Back to Top" 5) Totally Custom List Styles 6) Animated Image Gallery Captions with Bonus Ken Burns Effect 7) CSS-Only Accessible Dropdown Navigation Menu 8) ✨ Announcing ModernCSS.dev 9) Solutions to Replace the 12-Column Grid 10) CSS Button Styling Guide 11) Icon Button CSS Styling Guide 12) Resource: The Complete Guide to Centering in CSS 13) Generating `font-size` CSS Rules and Creating a Fluid Type Scale 14) Container Query Solutions with CSS Grid and Flexbox 15) Expanded Use of `box-shadow` and `border-radius` 16) 3 CSS Grid Techniques to Make You a Grid Convert 17) 3 Popular Website Heroes Created With CSS Grid Layout 18) Announcing Style Stage: A Community CSS Showcase 19) Pure CSS Custom Styled Radio Buttons 20) Pure CSS Custom Checkbox Style

This is the first post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

For many years, I constantly referred to this article by Matthew James Taylor for a method to keep a webpage footer at the bottom of the page regardless of the main content length. This method relied on setting an explicit footer height, which is not scalable but a very good solution BF (Before Flexbox).

If you mostly deal with SPA development, you may be confused about why this problem is still around, but it's still a possibility to find your footer floating up for:

  • login pages
  • blog/news articles (with no ads...)
  • interstitial pages of a flow like confirming actions
  • product listing pages
  • calendar event details

There are two ways to handle this with modern CSS: flexbox and grid.

Here's the demo, defaulted to the flexbox method. If you open the full Codepen, you can swap the $method variable to grid to view that alternative.

Read on past the demo to learn about each method.


Flexbox Method

This method is accomplished by defining:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

// Optional
main {
  margin: 0 auto;
  // or: align-self: center
  max-width: 80ch;
}

How it Works

First, we ensure the body element will stretch to at least the full height of the screen with min-height: 100vh. This will not trigger overflow if content is short (exception: certain mobile browsers) and it will allow content to continue stretching the height as needed.

Setting flex-direction: column keeps the behavior of normal document flow in terms of retaining stacked block-elements (which assumes direct children of body are all indeed block elements).

The advantage of flexbox is in leveraging the margin: auto behavior. This one weird trick will cause the margin to fill any space between the item it is set on its nearest sibling in the corresponding direction. Setting margin-top: auto effectively pushes the footer to the bottom of the screen.

Gotcha

In the demo, I've added an outline to main to demonstrate that in the flexbox method the main element doesn't fill the height. Which is why we have to use the margin-top: auto trick. This is not likely to matter to you, but if it does, see the grid method which stretches the main to fill the available space.

Grid Method

This method is achieved by setting:

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Optional
main {
  margin: 0 auto;
  max-width: 80ch;
}

How it Works

We retain the min-height: 100vh for this method, but we then use of grid-template-rows to space things correctly.

This method's weird trick is using the special grid unit fr. The fr means "fraction" and using it requests that the browser computes the available "fraction" of space that is left to distribute to that column or row. In this case, it fills all available space between the header and footer, which also solves the "gotcha" from the flexbox method.

Which is Better?

After seeing grid, you may have a moment of thinking it's clearly superior. However, if you add more elements between the header and footer you need to update your template (or ensure there's always a wrapping element such as a div to not affect any nested semantics/hierarchy).

On the other hand, the flexbox method is usable across various templates with multiple block elements in the midsection - for example, a series of <article> elements instead of a single <main> for an archive page.

So as with all techniques, it depends on the project :) But we can all agree it's amazing to have these modern CSS layout methods!

Modern CSS Solutions to Old CSS Problems (20 Part Series)

1) Keep the Footer at the Bottom: Flexbox vs. Grid 2) Equal Height Elements: Flexbox vs. Grid 3 ... 18 3) CSS-Only Full-Width Responsive Images 2 Ways 4) Pure CSS Smooth-Scroll "Back to Top" 5) Totally Custom List Styles 6) Animated Image Gallery Captions with Bonus Ken Burns Effect 7) CSS-Only Accessible Dropdown Navigation Menu 8) ✨ Announcing ModernCSS.dev 9) Solutions to Replace the 12-Column Grid 10) CSS Button Styling Guide 11) Icon Button CSS Styling Guide 12) Resource: The Complete Guide to Centering in CSS 13) Generating `font-size` CSS Rules and Creating a Fluid Type Scale 14) Container Query Solutions with CSS Grid and Flexbox 15) Expanded Use of `box-shadow` and `border-radius` 16) 3 CSS Grid Techniques to Make You a Grid Convert 17) 3 Popular Website Heroes Created With CSS Grid Layout 18) Announcing Style Stage: A Community CSS Showcase 19) Pure CSS Custom Styled Radio Buttons 20) Pure CSS Custom Checkbox Style

Posted on by:

5t3ph profile

Stephanie Eckles

@5t3ph

(she/her) ✍️ ModernCSS.dev, 👩🏼‍🎨 StyleStage.dev, 👩‍💻 Lead design system dev, 👩‍🏫 @eggheadio instructor, 👨‍👩‍👧‍👧 mom

Discussion

markdown guide
 

Resourceful posts! Lovin' your series!

Can you tell me how you generate: Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.

Is ti an Emmet thing? Like Lorem Ipsum?

 

I use cupcakeipsum.com/

Glad you're enjoying the series!

 

You have sugar-coated my day!
Thank you

I dunno if you are a coffee person, but I've just seen this as well :

coffeeipsum.com/