Skip to content
WebTricks

Sticky footer with flexbox

A footer that stays at the bottom of the viewport on short pages and gets pushed down by long content.

  • flexbox
  • layout
  • footer
  • sticky
  • page
Bar color#1f2330
Accent#7c5cff
HTML 
<div class="page"><header class="page__bar">Header</header><main class="page__main">Short content — the footer still sits at the bottom.</main><footer class="page__bar">Footer</footer></div>
CSS 
:root {
    --bar: #1f2330;
    --accent: #7c5cff;
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 240px;        /* use 100dvh on a real page */
    color: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.page__main {
    flex: 1;                  /* grow to fill, pushing the footer down */
    padding: 20px;
}

.page__bar {
    padding: 12px 20px;
    background: var(--bar);
    border-block: 2px solid var(--accent);
    font-weight: 600;
}

How it works

Make the page a vertical flex column that is at least as tall as the viewport (min-height: 100dvh), then let the main area grow to absorb the leftover space.

  • flex-direction: column stacks header, main and footer.
  • flex: 1 on .page__main makes it expand, so the footer is pushed to the bottom on short pages — and simply sits below long content when it overflows.
  • 100dvh (dynamic viewport height) behaves better than 100vh on mobile, where the address bar changes the visible height.

This is the cleanest sticky-footer pattern — no fixed heights or absolute positioning. For more layout recipes see the Flexbox guide.