CssHow-ToBeginner · 3 min read

How to Make Footer Stay at Bottom in CSS - Simple Sticky Footer

To make a footer stay at the bottom of the page in CSS, use flexbox on the container with min-height: 100vh and set the main content to grow with flex: 1. This pushes the footer down even if the page content is short, keeping it at the bottom.

📐

Syntax

Use a container with display: flex; and flex-direction: column; to stack content vertically. Set min-height: 100vh; so the container fills the full viewport height. Then, make the main content area flexible with flex: 1; to take all available space, pushing the footer to the bottom.

css

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

💻

Example

This example shows a page with a header, main content, and a footer that stays at the bottom even if the main content is short.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sticky Footer Example</title>
<style>
  html, body {
    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>Footer stays at the bottom even if content is short.</p>
    </main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Output

A webpage with a green header at top, light gray main content area in the middle, and a dark footer fixed at the bottom of the viewport even if the main content is short.

⚠️

Common Pitfalls

One common mistake is not setting the container's height or min-height to 100% or 100vh, so the footer floats up when content is short. Another is forgetting to make the main content flexible with flex: 1;, which is needed to push the footer down.

Also, avoid using fixed positioning for the footer unless you want it always visible on screen, which can cover content.

css

/* Wrong way: footer floats up when content is short */
.container {
  display: flex;
  flex-direction: column;
  /* missing min-height: 100vh; */
}
.main {
  /* missing flex: 1; */
}

/* Right way: */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  flex: 1;
}

📊

Quick Reference

Use display: flex; and flex-direction: column; on the page container.
Set min-height: 100vh; on the container to fill the viewport height.
Make the main content flexible with flex: 1; to push the footer down.
Do not use fixed positioning unless you want the footer always visible.

✅

Key Takeaways

Use flexbox with column direction and min-height 100vh on the container to keep footer at bottom.

Make main content flexible with flex: 1 to push footer down when content is short.

Avoid fixed positioning for footer unless you want it always visible on screen.

Always set html and body height to 100% and remove default margins.

Test with short and long content to ensure footer behaves correctly.