Design Atlas
한국어
▦ Layout

Sticky footer

스티키 푸터

A footer that sits at the bottom of the viewport when content is short, and simply follows the content down when it's long.

Also known as: Footer pinned to bottomFull-height layout
···
html
<div class="page" id="page">
  <header>Header</header>
  <main id="main"></main>
  <footer>Footer — always at the bottom</footer>
</div>
css
.page{width:min(64%,240px);height:min(92%,300px);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.12);background:var(--bg)}
header{background:var(--surface);border-bottom:1px solid var(--line);padding:10px;font-size:11px;font-weight:700;text-align:center}
main{flex:1 0 auto;padding:12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
main .ln{display:block;height:8px;border-radius:3px;background:var(--surface);border:1px solid var(--line);flex-shrink:0}
footer{background:var(--accent);color:#fff;padding:10px;font-size:9px;font-weight:700;text-align:center;flex-shrink:0}
js
const main = document.getElementById('main');
function render(n) {
  main.innerHTML = '';
  for (let i = 0; i < n; i++) {
    const ln = document.createElement('i');
    ln.className = 'ln';
    main.appendChild(ln);
  }
}
let long = false;
render(2);
setInterval(() => {
  long = !long;
  render(long ? 9 : 2);
}, 2200);

A common problem on short pages: if the footer just follows the normal document flow, it floats in the middle of the screen whenever the content is short. The fix is to wrap the whole page in display: flex; flex-direction: column; min-height: 100% and give the main content flex: 1. When content is short, flex: 1 soaks up all the leftover vertical space and pushes the footer to the bottom; when content is long, main simply grows to fit it and the footer naturally follows below.

The old trick was position: absolute; bottom: 0, which forces the footer down but requires manually matching padding-bottom on the content so it isn't covered — and breaks again the moment the footer's height changes. The flex approach needs no hardcoded height, so it's far more resilient.

CSS Grid does the same job just as well: grid-template-rows: auto 1fr auto on the parent, with header, main and footer in order. Either way, it boils down to one sentence — give the leftover space to the main content, not the footer.

When to use

Treat it as a near-default for any site where content length varies page to page — empty search results, login forms. If content is always guaranteed to be taller than the viewport, you don't need to think about it.