A footer that floats in the middle of a screen when there’s not enough content can make a page feel unfinished or awkward. This is where CSS sticky footers come in. A sticky footer stays anchored to the bottom of the viewport on short pages but behaves like a normal footer on pages with long content, creating a polished and balanced layout.
In this guide, we’ll explore why sticky footers are useful and how you can build them using modern CSS techniques like Flexbox and Grid. We’ll also look at practical examples and best practices to consider.
Benefits of a sticky footer?
Sticky footers aren’t just about looks. They play a functional role in improving user experience and maintaining layout consistency. Here are some reasons to use one:
- Keeps the layout balanced on short pages by preventing the footer from floating awkwardly in the middle of the screen when there isn’t enough content.
- Improves visual consistency by ensuring your site looks clean and professional with the footer always in place across all pages.
- Works well with responsive layouts because it adapts smoothly to different screen sizes, from mobile to desktop.
- Keeps important info within reach by making links like contact details or privacy policies easily accessible without requiring extra scrolling.
- Enhances user experience in single-page apps (SPAs) by maintaining layout stability even when content loads dynamically or changes frequently.
- Less intrusive than fixed footers because it only appears at the bottom when needed, unlike fixed footers that stay on screen and can cover content.
Different ways of building CSS sticky footers
Thanks to the improvements in CSS over the years, there are now multiple reliable ways to create sticky footers without relying on complicated hacks or heavy JavaScript. Let’s explore some of the most common approaches.
First, here’s the HTML structure we’ll use throughout:
<body>
<div class="wrapper">
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>
</div>
</body>Using CSS Flexbox
Flexbox is the go-to solution for many developers because it’s simple and works well across all screen sizes. By turning the page wrapper into a flex container with flex-direction: column, you can make the main content take up all available vertical space and naturally push the footer to the bottom.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* Pushes footer to the bottom */
}
footer {
background: #333;
color: white;
padding: 20px;
}Here’s a breakdown of the code snippet above:
display: flexon the wrapper arranges header, main content, and footer in a vertical stack.flex: 1on the main content tells it to grow and fill the empty space, ensuring the footer always sits at the bottom.- It’s fully responsive and doesn’t require extra hacks.
Using CSS Grid
CSS Grid is perfect if you want more control over your layout or have multiple sections. It allows you to define rows for your header, content, and footer, and easily keep the footer at the bottom.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
footer {
background: #333;
color: white;
padding: 20px;
}Here’s a breakdown of the code snippet:
grid-template-rows: auto 1fr auto;defines three rows, where the middle row (main content) takes up all extra space.- The footer automatically stays at the bottom without extra tweaks.
- It’s ideal for complex layouts where Flexbox might feel limiting.
📖 Read our in-depth guides to learn more about CSS Flexbox and CSS Grid. 👇
• CSS Flexbox vs Grid: Complete Guide & When to Use Each
• Tailwind CSS Grid: Complete Guide & Examples
Using Vanilla CSS (legacy technique)
Before Flexbox and Grid, developers used techniques like absolute positioning and margin hacks. While these work, they require more manual adjustments and can break easily with responsive designs.
html, body {
height: 100%;
margin: 0;
position: relative;
}
.wrapper {
min-height: 100%;
}
main {
padding-bottom: 60px; /* Footer height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background: #333;
color: white;
text-align: center;
line-height: 60px;
}Here’s how the code works:
position: absolute; bottom: 0;pins the footer to the bottom of the viewport.- A
padding-bottomor similar offset is required on the content area to prevent overlap. - It’s best reserved for legacy projects, not new designs.
Using min-height: 100vh
This is a minimal, modern approach that doesn’t rely on Flexbox or Grid. By setting the wrapper to min-height: 100vh, the content stretches to fill the viewport height, and the footer naturally rests at the bottom.
html, body {
margin: 0;
height: 100%;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
background: #333;
color: white;
padding: 20px;
}Here’s a breakdown of the code snippet above:
- The
min-heightproperty ensures the container always matches the height of the viewport. - The footer stays at the bottom when the content is short, but scrolls as normal when the content is long.
- It’s simple but not as flexible as Flexbox or Grid.
First time here? Discover what Prismic can do!
👋 Meet Prismic, your solution for creating performant websites! Developers, build with your preferred tech stack and deliver a visual page builder to marketers so they can quickly create on-brand pages independently!
Sticky footer examples
Seeing real-world implementations can make it easier to understand how sticky footers work. Below are a few practical examples built with different techniques.
Muggle’s sticky footer
Ultimate sticky footer by Paul O’Brien
Flexbox sticky footer by Jeff Kinley
Sticky footer magic by Melissa
Best practices to follow when creating CSS sticky footers
Always test on different screen sizes
A footer might look perfect on a desktop but break on smaller devices like phones or tablets. Make it a habit to test your sticky footer on various screen widths and orientations using browser developer tools. This ensures the layout remains consistent across all devices.
Avoid fixed-height footers
Fixed heights often cause issues when the footer content grows or when the text wraps on smaller screens. Instead of using a hard height value, rely on padding or min-height to give the footer breathing space. This approach allows the footer to adapt naturally as its content changes.
Don’t rely on JavaScript, margin hacks, or absolute positioning for layout
Older methods like using position: absolute, large negative margins, or JavaScript to “force” a footer to stick are no longer necessary and often cause more problems than they solve. These techniques can break on responsive layouts, lead to overlapping content, and make maintenance harder.
Modern CSS solutions like Flexbox and Grid are far cleaner, more reliable, and work across all devices without additional scripting.
Test on both short and long pages
A well-built sticky footer should adapt to both minimal and lengthy content without breaking the layout. Testing your design on pages with very little content and on pages that require a lot of scrolling helps ensure the footer stays in place on short pages and behaves correctly when the page is long.
Final Thoughts
So far, we’ve covered the benefits of sticky footers and various ways of creating them. Sticky footers improve user experience by keeping layouts balanced and professional across all devices. Modern CSS techniques like Flexbox and Grid make implementation straightforward and reliable, eliminating the need for complicated workarounds.
Remember to test your sticky footer on different screen sizes and content lengths, avoid fixed heights, and stick with modern CSS solutions for the best results.
Happy coding!
