How to Create a Sticky Footer in CSS
Use Flexbox when you want the footer to stay at the bottom of the page, even when the page content is short. This keeps layouts clean on landing pages, login screens, and simple content pages.
What you’ll build or solve
You’ll learn how to create a sticky footer in CSS using a full-height Flexbox layout. You’ll also know how to keep the footer pushed down without using fixed positioning.
Learn CSS on Mimo
When this approach works best
This approach is the right choice when short pages leave empty space below the content and the footer floats awkwardly in the middle.
Common real-world scenarios include:
- Login pages
- Pricing pages
- Landing pages
- Course overview pages
- Basic documentation pages
This is a bad idea when the footer should always stay visible while scrolling. In that case, use position: fixed.
Prerequisites
You only need:
- A basic HTML page with a footer
- A text editor
- Basic HTML and CSS knowledge
Step-by-step instructions
Step 1: Use a full-height Flexbox page layout
Wrap the page in a vertical Flexbox container and let the main content grow.
HTML
<body>
<main>Main content for USA pricing</main>
<footer>Footer links</footer>
</body>
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
</style>
The main section expands to fill the extra space, which pushes the footer to the bottom.
HTML
<body>
<header>France plans</header>
<main>Short page content</main>
<footer>Footer links</footer>
</body>
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
</style>
What to look for:
min-height: 100vhmakes the page fill the screendisplay: flexturns the page into a vertical layoutflex-direction: columnstacks header, main, and footermain { flex: 1; }pushes the footer down- The footer still moves naturally lower on long pages
Examples you can copy
Landing page footer
HTML
<body>
<main>UK landing page content</main>
<footer>Contact and pricing</footer>
</body>
Login page footer
HTML
<body>
<main>Login form</main>
<footer>Terms and privacy</footer>
</body>
Documentation footer
HTML
<body>
<main>France developer docs</main>
<footer>API reference links</footer>
</body>
Common mistakes and how to fix them
Mistake 1: Using position: fixed by mistake
What the reader might do:
HTML
<style>
footer {
position: fixed;
bottom: 0;
}
</style>
Why it breaks: the footer stays visible at all times and can overlap content.
Corrected approach:
HTML
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
</style>
Mistake 2: Forgetting flex: 1 on the content area
What the reader might do:
HTML
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
</style>
Why it breaks: without a growing content area, nothing pushes the footer to the bottom.
Corrected approach:
HTML
<style>
main {
flex: 1;
}
</style>
Mistake 3: Using fixed heights instead of viewport height
What the reader might do:
HTML
<style>
body {
height: 500px;
}
</style>
Why it breaks: the layout may fail on larger or smaller screens.
Corrected approach:
HTML
<style>
body {
min-height: 100vh;
}
</style>
Troubleshooting
If the footer still floats in the middle, add flex: 1 to the main content.
If the footer overlaps content, remove position: fixed.
If the layout breaks on tall screens, use min-height: 100vh.
If the footer disappears on long pages, confirm the content is inside main.
Quick recap
- Use a vertical Flexbox layout on
body - Add
min-height: 100vh - Set
maintoflex: 1 - Let the footer stay in normal document flow
- Use fixed positioning only for always-visible footers
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot