CssHow-ToBeginner · 3 min read

How to Create Sticky Footer Using Flexbox in CSS

To create a sticky footer using flexbox, set the container to display: flex with flex-direction: column and make the main content area expand using flex: 1. This pushes the footer to the bottom of the viewport when content is short, keeping it visible at the page bottom.

📐

Syntax

Use a container with display: flex and flex-direction: column to stack elements vertically. The main content area should have flex: 1 to fill available space. The footer will then stay at the bottom if content is short or below content if page is long.

display: flex; - activates flexbox layout.
flex-direction: column; - stacks children vertically.
flex: 1; - makes main content grow to fill space.

css

body, html {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  flex: 1;
}
.footer {
  background: #ccc;
  padding: 1rem;
  text-align: center;
}

💻

Example

This example shows a page with a header, main content, and a sticky footer. The footer stays at the bottom of the viewport if the content is short, or below the content if the page is taller.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sticky Footer with Flexbox</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
  }
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  header {
    background: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
  }
  .main {
    flex: 1;
    padding: 1rem;
    background: #f9f9f9;
  }
  .footer {
    background: #333;
    color: white;
    padding: 1rem;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="container">
    <header>Header</header>
    <main class="main">
      <p>This is the main content area.</p>
      <p>It grows to fill space pushing the footer down.</p>
    </main>
    <footer class="footer">Sticky Footer</footer>
  </div>
</body>
</html>

Output

A webpage with a green header at top, a light gray main content area filling the middle, and a dark gray footer stuck at the bottom of the browser window if content is short.

⚠️

Common Pitfalls

Common mistakes include:

Not setting min-height: 100vh on the flex container, so the container does not fill the viewport height.
Forgetting to set flex: 1 on the main content, so it does not expand to push the footer down.
Using fixed heights on content or footer that break the flexible layout.

Without these, the footer may not stick to the bottom or may overlap content.

css

/* Wrong: missing flex: 1 on main */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  /* flex: 1; missing */
}
.footer {
  background: #ccc;
  padding: 1rem;
}

/* Right: add flex: 1 to main */
.main {
  flex: 1;
}

📊

Quick Reference

Set container to display: flex; flex-direction: column; min-height: 100vh;
Make main content flex: 1; to fill space
Footer stays at bottom if content is short
Works with responsive layouts

✅

Key Takeaways

Use a flex container with column direction and full viewport height to structure the page.

Apply flex: 1 to the main content area to push the footer down.

Set min-height: 100vh on the container to ensure it fills the screen height.

Avoid fixed heights on main or footer to keep the layout flexible.

This method keeps the footer visible at the bottom on short pages and below content on longer pages.