How to push the footer to the bottom
Short answer
Make the page a column at least as tall as the screen and let the main part grow:
<style>
.page { display: flex; flex-direction: column; min-height: 200px; border: 1px solid silver; }
.page main { flex: 1; padding: 12px; }
.page footer { padding: 8px 12px; background: gainsboro; }
</style>
<div class="page">
<main>Short content</main>
<footer>© 2026 My Site</footer>
</div>The example uses 200px so it fits on this page. On a site put min-height: 100vh (or 100dvh) on body.
A grid variant
Three rows: the header and footer fit their content, the middle takes the rest:
<div style="display: grid; grid-template-rows: auto 1fr auto; min-height: 200px; border: 1px solid silver;">
<header style="background: lavender; padding: 8px;">Header</header>
<main style="padding: 8px;">Content</main>
<footer style="background: gainsboro; padding: 8px;">Footer</footer>
</div>Common mistake
A footer with position: absolute; bottom: 0 or position: fixed looks like a fix while the page is short. Once the content is taller than the screen, such a footer covers the text. The flexbox and grid layouts above grow with the content and do not have this problem.
Functions used in this recipe
- min-height — The minimum height: the element is at least this tall, but can grow.
- flex-direction — The direction of the main axis of a flex container: items in a row or in a column.
- flex-grow — How much of the free space a flex item takes.
- grid-template-rows — The number and heights of the rows of a grid.