CSS: How to Make Footer Stick to the Bottom (Even on Short Pages)

A sticky footer ensures your website looks polished and professional — especially on pages with little content. Without it, your footer might awkwardly float in the middle of the screen. In this guide, we’ll walk you through how to stick a footer to the bottom using modern CSS layout techniques.

Table of Contents

🔍 What Do We Mean by “Sticky Footer”?

There are two common footer behaviors:

Static Footer: Appears after all content — may float mid-screen on short pages.
Sticky Footer: Always stays at the bottom of the viewport, even if the page doesn’t have much content.

This blog explains how to implement the second one — a footer that always sticks to the bottom, without overlapping your content.

✅ Best Method: Flexbox Layout

Flexbox is a modern CSS layout system that makes sticky footers easy and reliable.

🧪 Example: Sticky Footer with Flexbox

<!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>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    .wrapper {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .content {
      flex: 1;
      padding: 20px;
    }

    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 15px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="content">
      <h1>Welcome</h1>
      <p>This is a short page, but the footer stays at the bottom!</p>
    </div>
    <footer>
      © 2025 My Website
    </footer>
  </div>
</body>
</html>

✅ Explanation:

html, body set to full height (100%) so layout spans the full screen.
.wrapper uses flex-direction: column to arrange content vertically.
.content expands to fill space using flex: 1.
footer stays pinned at the bottom of the screen if there’s not enough content.

📏 Alternate Method: CSS Grid

.wrapper {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

This achieves the same result using CSS Grid. Place your content in the first row (1fr) and the footer in the second (auto).

❌ Common Mistakes

Mistake	Why It Fails
Using `position: fixed`	Footer may overlap content
Not setting `min-height`	Layout won’t stretch full screen
Forgetting `flex: 1` on main	Footer won’t be pushed to bottom

🧠 Pro Tips

For pages with dynamic content, Flexbox ensures responsiveness.
Avoid position: absolute or fixed for footers unless building a floating layout.
Always test on short and long pages to ensure consistent footer behavior.

🔚 Conclusion

Creating a sticky footer with CSS is simple and effective using Flexbox or Grid. It ensures your layout remains structured and professional, regardless of content length.

📌 Quick Recap

Task	CSS Solution
Full-page layout	`min-height: 100vh`
Footer to bottom	Use Flexbox or CSS Grid layout
Prevent overlap	Don’t use `position: fixed`
Responsive spacing	Apply `flex: 1` to content section