Keep the Footer Stuck to the Bottom of the Page

Your website footer should always be positioned at the bottom of the page whether the content is short or long. This small visual detail greatly improves the user experience and gives your site a polished, professional look. Fortunately, achieving this behaviour is not difficult. In this guide, you’ll learn a reliable technique using HTML and CSS and we’ll explore modern alternatives for flexible layouts.

🧱 Basic Sticky Footer Layout with HTML & CSS

Here is a simple layout that ensures the footer is always pushed to the bottom, even on pages with very little content:

🧩 HTML Structure

<body>	
  <div id="wrapper">
    <div id="header">Header</div>
    <div id="content">Main Content</div>
    <div id="footer">Footer</div>
  </div>
</body>

🎨 CSS Styling

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

#content {
  padding-bottom: 100px; /* same as footer height */
}

#footer {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #f3f3f3;
}

📌 Important: The padding-bottom on #content should match the height of your footer. Otherwise, the content may overlap with the footer.

🪄 Modern Approach Using Flexbox

If you prefer a more responsive and modern layout, Flexbox provides a cleaner solution:

🧩 HTML

<body>
  <div class="flex-wrapper">
    <header>Header</header>
    <main>Main Content</main>
    <footer>Footer</footer>
  </div>
</body>

🎨 CSS

html, body {
  height: 100%;
  margin: 0;
}

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

main {
  flex: 1;
}

footer {
  height: 100px;
  background: #eee;
}

🔄 This layout automatically adjusts the footer’s position based on the content and ensures it stays at the bottom of the viewport on short pages.

💡 Tips & Additional Notes

When using position: absolute, be sure your footer does not overlap your content. Use proper spacing like padding-bottom.
Flexbox is recommended for newer projects due to its simplicity and responsiveness.
Avoid using JavaScript just to stick a footer, CSS is more than capable.
You can also add a sticky footer in grid layouts using CSS Grid.

🧪 Example with CSS Grid

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

header, footer {
  height: 100px;
  background-color: #eee;
}

main {
  padding: 1rem;
}

🧰 Summary

Sticky footers are simple but crucial for usability. You have multiple CSS techniques to choose from:

Method	Responsive	Easy to Implement	Recommended
Absolute	❌	✅	👎
Flexbox	✅	✅	✅
CSS Grid	✅	✅	✅

For new projects, Flexbox or CSS Grid are your best options. They’re clean, modern and adapt well to dynamic content.