How to make sticky footer in css

CssHow-ToBeginner · 4 min read

How to Make a Sticky Footer in CSS: Simple Guide

To make a sticky footer in CSS, use a flexbox layout on the page container with min-height: 100vh and set the footer to stay at the bottom by using margin-top: auto. This ensures the footer sticks to the bottom even if the page content is short.

📐

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, apply margin-top: auto to the footer to push it to the bottom.

display: flex; - creates a flexible container
flex-direction: column; - stacks children vertically
min-height: 100vh; - container fills full screen height
margin-top: auto; - pushes footer to bottom

css

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
.footer {
  margin-top: auto;
}

💻

Example

This example shows a page with a header, content area, and a sticky footer that stays at the bottom even if the 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;
  }
  .content {
    flex: 1;
    padding: 1rem;
    background: #f0f0f0;
  }
  footer {
    background: #333;
    color: white;
    padding: 1rem;
    text-align: center;
    margin-top: auto;
  }
</style>
</head>
<body>
  <div class="container">
    <header>Header</header>
    <div class="content">
      <p>This is the main content area.</p>
      <p>Footer will stick to the bottom of the page.</p>
    </div>
    <footer>Sticky Footer</footer>
  </div>
</body>
</html>

Output

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

⚠️

Common Pitfalls

One common mistake is not setting the container's height or min-height to 100vh, so the footer does not stick at the bottom when content is short. Another is forgetting to use margin-top: auto on the footer, which is needed to push it down.

Also, avoid using fixed positioning for the footer if you want it to stay below content and not overlap.

css

/* Wrong way: footer floats in the middle if container height not set */
.container {
  display: flex;
  flex-direction: column;
  /* missing min-height: 100vh; */
}
.footer {
  /* missing margin-top: auto; */
}

/* Right way: */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
  margin-top: auto;
}

📊

Quick Reference

Use display: flex and flex-direction: column on the page container.
Set min-height: 100vh on the container to fill viewport height.
Apply margin-top: auto on the footer to push it to the bottom.
Ensure html, body have height: 100% and no margin.

✅

Key Takeaways

Use Flexbox with column direction and min-height 100vh on the container for sticky footer layout.

Apply margin-top: auto on the footer to push it to the bottom of the page.

Set html and body height to 100% and remove default margins for correct layout.

Avoid fixed positioning for footers if you want them below content without overlap.

Test with short and long content to ensure footer behaves as expected.