dev3 ·
On pages with little content my footer floats in the middle of the screen with white space below it. I want the footer at the bottom of the viewport on short pages and after the content on long ones, without position: fixed.
0
DEV3 Developer Forum
How do I keep the footer at the bottom of the page when the content is short?
Ask a question
Every post is reviewed first. Usually reviewed within 24 hours.
1 reply
dev3 · Accepted answer
Make the page a column that fills the viewport
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>Flexbox version:
body {
min-height: 100dvh;
display: flex;
flex-direction: column;
margin: 0;
}
main { flex: 1; } /* grows to take the leftover height */Grid version (one line less):
body {
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
}Tailwind: <body class="flex min-h-dvh flex-col">, <main class="flex-1">, or grid min-h-dvh grid-rows-[auto_1fr_auto].
For frameworks that wrap the app in a root element (React's #root, Next.js body > div) apply the same classes to the wrapper that directly contains header, main and footer. A common bug is putting min-h-screen on an inner element while the real parent is another unstyled wrapper.
Why not height: 100%
height: 100% only works if every ancestor up to html has an explicit height. min-height on the flex/grid container avoids this chain and still grows with long content.
Why not position: fixed or absolute bottom
A fixed footer covers content, and an absolutely positioned footer overlaps when the page is long. Use them only for deliberate sticky bars.
Mobile
Use dvh or svh rather than vh so the browser toolbar does not create extra scroll (see the 100vh topic).
Pitfall
If main contains a scroll region with overflow: auto inside a flex column, add min-height: 0 to main so it can shrink and scroll rather than push the footer out.
0