How can you make a footer always stick to the bottom of the page even with less content?
•15 min read
When a webpage doesn’t have enough content, the footer may appear floating in the middle instead of sticking to the bottom.
We can fix this with CSS Flexbox or CSS Grid.
✅ Solution 1: Using Flexbox (Recommended)
🧩 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>Sticky Footer Page</h1>
</header>
<main>
<p>This page has very little content, but the footer still sticks to the bottom.</p>
</main>
<footer>
<p>© 2025 My Website | All rights reserved.</p>
</footer>
</div>
</body>
</html>
🎨 CSS (Flexbox)
/* style.css */
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex: 1; /* Takes remaining space */
padding: 20px;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 15px;
}
🧠 How it works:
display: flexmakes the wrapper a flex container.flex-direction: columnstacks elements vertically.flex: 1on<main>expands it to fill available space, pushing the footer down.- The footer naturally stays at the bottom even with little content.
✅ Solution 2: Using CSS Grid
CSS
html, body {
height: 100%;
margin: 0;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
header, footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
}
main {
padding: 20px;
}
🧠 Explanation:
grid-template-rows: auto 1fr auto;means:- The header takes natural height
- The middle (
1fr) expands to fill empty space - The footer stays at the bottom
✅ Solution 3: Using Positioning (Less Recommended)
html, body {
height: 100%;
margin: 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
background: #222;
color: #fff;
text-align: center;
padding: 15px;
}
⚠️ Note:
This works only for static pages — it can overlap content if the page height is longer than the viewport.
🧾 Best Practice
👉 Use Flexbox or Grid for modern, responsive designs.
They ensure:
- The footer sticks at the bottom when content is short
- The footer pushes below the fold when content is long
