How to Implement a Sticky Footer with CSS : The Complete Guide

4 min readSep 6, 2024

A sticky footer is a useful design feature that ensures the footer stays at the bottom of the page, even when content is short. This creates a cleaner, more professional look and helps maintain consistent user experience, especially on pages with little content. In this article, I’ll show you how to implement a sticky footer using modern CSS techniques.

What is a Sticky Footer?

A sticky footer is a footer that “sticks” to the bottom of the viewport when there isn’t enough content to push it down. When content exceeds the viewport height, the footer moves down with the rest of the page as usual.

1. The Basic HTML Structure

To begin, let’s create a basic structure for a webpage that includes a header, main content, and a footer.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Sticky Footer Example</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>
  
  <main>
    <p>Welcome to my website. Here's some content.</p>
  </main>
  
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

This simple layout consists of three sections: a header, a main content area, and a footer.

2. CSS Flexbox Solution

Using Flexbox is one of the easiest and most effective ways to create a sticky footer. Flexbox allows you to align and distribute space between elements, making it ideal for this layout.

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

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

header {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

main {
  flex: 1;
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

html, body { height: 100%; }: This ensures that the body takes up the full height of the viewport.
body { display: flex; flex-direction: column; min-height: 100vh; }: The flex-direction: column makes the body act as a flex container with vertical stacking, and min-height: 100vh ensures it takes at least the full viewport height.
main { flex: 1; }: This line is critical because it makes the main section flexible, allowing it to expand and fill the available space, pushing the footer to the bottom if the content is short.

3. CSS Grid Solution

Alternatively, you can achieve the same result using CSS Grid. Grid provides a powerful and flexible way to manage layouts.

CSS (for Grid layout):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

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

header {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

main {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

In this case, grid-template-rows: auto 1fr auto; defines three rows: one for the header (auto), one flexible row that takes up the remaining space (1fr), and one for the footer (auto). This ensures the footer stays at the bottom of the page when content is short and moves down when content grows.

4. Handling Edge Cases

Sometimes, the footer might still behave unexpectedly on smaller screens or different browsers. Here are a few tips to ensure smooth performance:

Viewport Height Issues: If you’re experiencing issues on mobile devices, try using min-height: 100vh instead of height: 100% to make sure the layout behaves consistently.
Overflow Content: If your main content overflows and scrollbars appear, both the Flexbox and Grid layouts will still keep the footer at the bottom.

5. Testing and Finalizing

To test your sticky footer, adjust the height of the main content. With minimal content, the footer should remain at the bottom of the viewport, and as you add more content, it should push the footer down naturally.

Here’s an example of the full HTML and CSS for a working sticky footer using Flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
    }

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

    header {
      background-color: #333;
      color: white;
      padding: 15px;
      text-align: center;
    }

    main {
      flex: 1;
      padding: 20px;
    }

    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }

  </style>
  <title>Sticky Footer Example</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>
  
  <main>
    <p>Welcome to my website. Here's some content.</p>
  </main>
  
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

Output:

Conclusion

Implementing a sticky footer is easier than ever with CSS Flexbox or Grid. These modern layout techniques provide a clean, flexible solution to keep your footer at the bottom of the page, regardless of content length. Whether you choose Flexbox or Grid, you can now enhance your website’s design with a simple, responsive sticky footer.

Thank you for reading! If you found this post helpful and would like to support me in my web development journey, consider visiting my Ko-fi page. Your support means a lot and helps me create more content!

Happy Coding! 👋