Sticky footer
A footer that sits at the bottom of the viewport on short pages and below the content on long ones.
<div class="page">
<header>Header</header>
<main>
<h1>Short page</h1>
<p>There is not enough content here to fill the screen, and the footer is still at the bottom.</p>
<p><button id="more" type="button">Add content</button></p>
</main>
<footer>Footer — always at the bottom, never floating over the content</footer>
</div>* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; background: #f6f8fb; }
/* ============ the whole technique ============ */
.page {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
main { flex: 1; }
/* ============================================= */
/* the grid version, if you prefer it:
.page {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100dvh;
}
*/
header, footer {
background: #fff;
border: 1px solid #e2e7ef;
padding: 16px 24px;
color: #5b6b83;
font-size: .9rem;
}
header { border-width: 0 0 1px; }
footer { border-width: 1px 0 0; }
main { padding: 32px 24px; }
main h1 { font-size: 1.4rem; color: #16202e; margin-bottom: 10px; }
main p { color: #5b6b83; margin-bottom: 14px; }
button {
font: inherit;
font-size: .9rem;
padding: 9px 18px;
border: 1px solid #d9e0ea;
border-radius: 8px;
background: #fff;
cursor: pointer;
}
button:hover { background: #f2f5f9; }let n = 0;
document.getElementById("more").addEventListener("click", () => {
const p = document.createElement("p");
p.textContent = `Paragraph ${++n}. Keep pressing and the footer moves down with the content instead of staying pinned.`;
p.style.color = "#5b6b83";
document.querySelector("main").appendChild(p);
});How it works
This used to need negative margins, a wrapper div and a hard-coded footer height that broke the moment anyone edited the footer. It is now three lines.
min-height, never height. height: 100dvh caps the page at one screen and the content scrolls inside it or overflows. min-height sets a floor, so the page grows past it when there is more content. This is the whole trick.
flex: 1 on main makes the middle section absorb the leftover space. On a short page that space is real and pushes the footer down; on a long page there is none and the footer simply follows the content.
dvh rather than vh. On mobile browsers 100vh is measured against the viewport with the address bar hidden, so a page sized to it is taller than what you can actually see, and the footer sits just off the bottom of the screen until you scroll. 100dvh tracks the visible area as the bar shows and hides. Browsers without support fall back to treating it as vh, which is the old behaviour rather than a break.
The grid version is equivalent. grid-template-rows: auto 1fr auto does the same job, and is slightly better when you have exactly three regions. Flexbox is easier when the number of sections varies.
This is not position: sticky. The names collide confusingly. position: sticky keeps an element visible while scrolling past it; a "sticky footer" sits at the bottom of the page and does not float over anything.
Accessibility notes
A genuinely fixed footer eats vertical space, which hurts most on a small screen in landscape and for anyone using large text or a screen magnifier. This approach takes no space at all when there is content to fill the page.
The footer is a real <footer> element, so it is exposed as a contentinfo landmark and screen reader users can jump straight to it.
Making it yours
Press the button in the preview to add content and watch the footer stop being pinned. That is the behaviour you want and the reason a fixed footer is the wrong answer.
If you want the footer visible at all times while scrolling, that is position: fixed or position: sticky; bottom: 0 — a different component, and one that costs vertical space on every screen. Worth it for a checkout bar, rarely worth it for a footer.
Related templates
Holy grail layout
Header, footer, two sidebars and a main column — in nine lines of grid.
HTMLCSSCentering recipes
Six ways to centre something, and which one to use when.
HTMLCSSResponsive grid without media queries
Four grid recipes that reflow on their own, using auto-fit, minmax and container queries.
HTMLCSSProduct card
An e-commerce card with image, price, rating and an add-to-basket action.
HTMLCSSTailwindCheck your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.