Photo by Glenn Carstens-Peters on Unsplash

Sticky footer with flexbox

With flexbox there is now a simple way to let your footer stick to the bottom, when there is not enough content, and make it static when there is.

At first we need the HTML-skeleton. One wrapper, in this case the body-element itself, and at least 2 child-elements. I'm also including the header here, because it is often used in this kind of arrangement.

<body>
  <div class="Header"></div>
  <div class="Content"></div>
  <div class="Footer"></div>
</body>

And now give the body display: flex and flex-direction: column to stack the three child elements vertically.
To support IE 11 we also need those styles on the html element.
Also the body elements need to be at least 100vh in height.

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

The trick now is to give the .Content-element the flex-grow: 1 so the footer gets pushed to the bottom.
You also can add flex-shrink: 0 to the other elements so that they don't get squished when the viewport is too small.

.Header,
.Footer {
  flex-shrink: 0;
}
.Content {
  flex-grow: 1;
}

And voilá your footer is at the bottom all the time.

The complete result:

See the Pen flexbox-sticky-footer by schoenwaldnils (@schoenwaldnils) on CodePen.

Sticky footer with flexbox

The complete result:

Related links:

Author: Nils Schönwald