Frontend Basics

How to Create a Fixed Footer with HTML & CSS

By Robson Kanhalelo •
CSS Sticky Footer Concept
Source: Stack Overflow

One of the most persistent issues in web design is the "floating footer"—where the footer sits in the middle of the screen because the page content is too short. We want the footer to stick to the bottom of the viewport, regardless of content length.

The HTML Structure

Keep your structure simple. Everything lives inside the body tag:

<body>
  <header>My Navbar</header>
  <main class="content">Page content goes here...</main>
  <footer>Sticky Footer</footer>
</body>

The CSS Flexbox Magic

By using flex-direction: column and margin-top: auto, we push the footer down effectively.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Crucial: Full viewport height */
}

.content {
  flex: 1; /* This pushes the footer down */
}

footer {
  margin-top: auto; /* Final insurance to keep it at the bottom */
}

Pro Tip: min-height

Always use min-height: 100vh on the body. This ensures that even if you have zero content, the body still stretches to fill the whole screen.

Happy coding!