Sticky Footer with HTML and CSS

How to Create a Sticky Footer with HTML and CSS (Beginner Guide)

by

A sticky footer is a footer that stays at the bottom of the page even if the content is short. It’s a common UI pattern and very useful in modern websites. In this tutorial, you’ll learn how to build a sticky footer using only HTML and CSS — no JavaScript required.

Let’s dive in step by step!

👁️ Preview

🧱 What You’ll Build

We’ll create a basic layout with a header, main content area, and a footer that sticks to the bottom when there’s not enough content.

🗂 Step 1: Create the Basic HTML Structure

Let’s start with a simple layout in 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>My Website</h1>
    </header>

    <main>
      <p>This is the main content area.</p>
    </main>

    <footer>
      <p>© 2025 My Website</p>
    </footer>
  </div>
</body>
</html>

✅ Explanation

  • wrapper: This will be the flex container that allows us to control the height and layout.
  • header, main, and footer: These are semantic tags for our page structure.

🎨 Step 2: Add CSS to Make the Footer Sticky

Now we use Flexbox to ensure the footer sticks to the bottom even with little content.

/* style.css */

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

html, body {
  height: 100%;
  font-family: sans-serif;
}

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

header {
  background-color: #7179F4;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  flex: 1;
  padding: 20px;
  background-color: #FCFAFF;
}

footer {
  background-color: #525174;
  color: white;
  padding: 20px;
  text-align: center;
}

✅ Explanation

  • html, body { height: 100%; }: Allows us to use full viewport height.
  • .wrapper { min-height: 100vh; }: Makes sure the layout fills the screen.
  • flex: 1 on <main> tells it to expand and take up available space, pushing the footer down.
  • The footer remains at the bottom even if the main content is short.

🔍 Test Your Layout

Try removing or reducing the text inside <main>. The footer should stay at the bottom. Add more text, and the footer will move down normally.

This behavior is exactly what we want from a sticky footer.

💡 Extra Tips

  • You can use this layout as a base for many websites.
  • Want a fixed footer instead? Use position: fixed; bottom: 0; — but that’s a different pattern.
  • Always test on different screen sizes!

🔚 Conclusion

Creating a sticky footer with HTML and CSS is very beginner-friendly — no JavaScript needed! Using Flexbox makes your layout flexible and easy to manage.

This technique ensures your footer is always placed properly, enhancing user experience on small-content pages.

🧠 Practice Task

Try creating a personal portfolio page using this sticky footer layout. Include:

  • A short bio in <main>
  • Your name in <header>
  • Social media links in <footer>

Leave a Comment