How to create sticky footer in html

HtmlHow-ToBeginner · 3 min read

How to Create a Sticky Footer in HTML Easily

To create a sticky footer in HTML, use CSS Flexbox on the page's container with display: flex and flex-direction: column. Set the main content to flex: 1 so the footer stays at the bottom even if the page content is short.

📐

Syntax

Use a container element with display: flex and flex-direction: column. Inside it, have a main content area with flex: 1 to fill available space, and a footer that stays at the bottom.

display: flex; makes the container flexible.
flex-direction: column; stacks children vertically.
flex: 1; on main content grows it to fill space.
Footer stays below content, at bottom if content is short.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body, html {
      height: 100%;
      margin: 0;
    }
    .page-container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    .content {
      flex: 1;
    }
    footer {
      background: #333;
      color: white;
      padding: 1rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <main class="content">
      <!-- Page content here -->
    </main>
    <footer>
      Sticky Footer Content
    </footer>
  </div>
</body>
</html>

Output

A page with a footer bar at the bottom of the browser window, even if the main content is short.

💻

Example

This example shows a sticky footer that stays at the bottom of the page. The main content area can grow or shrink, but the footer remains visible at the bottom.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body, html {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .page-container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    .content {
      flex: 1;
      padding: 2rem;
      background-color: #f0f0f0;
    }
    footer {
      background-color: #222;
      color: #fff;
      padding: 1rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <main class="content">
      <h1>Welcome to My Page</h1>
      <p>This is some content above the sticky footer.</p>
    </main>
    <footer>
      © 2024 My Website - Sticky Footer
    </footer>
  </div>
</body>
</html>

Output

A webpage with a light gray content area and a dark footer bar fixed at the bottom of the browser window.

⚠️

Common Pitfalls

Common mistakes when creating sticky footers include:

Not setting the container height to 100vh or using min-height: 100vh, so the footer doesn't stick to the bottom on short pages.
Forgetting to set flex: 1 on the main content, causing the footer to float up.
Using fixed positioning for the footer, which can cover content or not behave well on small screens.

Using Flexbox as shown avoids these issues and keeps the footer accessible and visible.

css

<!-- Wrong way: footer floats up if content is short -->
<style>
  .page-container {
    display: block; /* no flex */
    min-height: 100vh;
  }
  .content {
    /* no flex grow */
  }
  footer {
    background: #333;
    color: white;
    padding: 1rem;
  }
</style>

<!-- Right way: use flex and flex:1 -->
<style>
  .page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .content {
    flex: 1;
  }
  footer {
    background: #333;
    color: white;
    padding: 1rem;
  }
</style>

📊

Quick Reference

Summary tips for sticky footer:

Use display: flex and flex-direction: column on the page container.
Set flex: 1 on the main content area to fill space.
Use min-height: 100vh on the container to cover full viewport height.
Avoid fixed positioning for footers unless you want it always visible on scroll.

✅

Key Takeaways

Use CSS Flexbox with a column layout to create a sticky footer.

Set the main content area to flex-grow with flex: 1 to push the footer down.

Ensure the container covers full viewport height with min-height: 100vh.

Avoid fixed positioning for footers to prevent overlap and accessibility issues.

Test on different screen sizes to confirm the footer stays at the bottom.