CSS
CSS: How to Make Footer Stick to the Bottom of the Page
Footers are essential components of most websites — often containing navigation links, copyright info, or contact details. But when the page content is short, the footer might appear awkwardly halfway up the screen.
To solve this, you’ll want a “sticky footer” — a footer that stays at the bottom of the page, even if the content is too short.
In this post, we’ll walk you through how to make a footer stick to the bottom using CSS, with clean and modern layout techniques.
🎯 Goal
- If content is short: footer sticks to bottom of the viewport.
- If content is long: footer stays at the end of the content (normal behavior).
✅ Method 1: Flexbox Layout (Recommended)
🧱 HTML Structure
<body>
<div class="wrapper">
<main class="content">
<p>Your main content goes here.</p>
</main>
<footer class="footer">
<p>© 2025 Your Company</p>
</footer>
</div>
</body>
🎨 CSS Styling
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh; /* Full viewport height */
}
.content {
flex: 1; /* Take up remaining space */
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
📝 Explanation:
min-height: 100vhensures the wrapper always fills the screen.flex: 1makes the content push the footer to the bottom when needed.
✅ Method 2: Positioning with Absolute (Not Preferred)
<footer class="footer">Footer content</footer>
body {
margin: 0;
padding-bottom: 60px; /* Height of footer */
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
height: 60px;
width: 100%;
background: #444;
color: #fff;
}
⚠️ This approach can overlap content and doesn’t respond well to dynamic content. Use with caution.
✅ Method 3: Grid Layout (Modern Alternative)
body {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
margin: 0;
}
.footer {
background-color: #222;
color: #fff;
padding: 20px;
text-align: center;
}
🚀 Final Thoughts
The Flexbox solution is the most reliable and responsive way to make a footer stick to the bottom. Whether your page has one line of content or thousands, it keeps your layout clean and consistent.