CSS

Implement a Sticky Footer with Flexbox

Learn to create a "sticky footer" that always remains at the bottom of the viewport, even if the page content is short, using CSS Flexbox.

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1; /* Pushes the footer down */
  padding: 20px;
}

.footer {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

/* HTML structure for the snippet */
/*
<body>
  <header><h1>My Website</h1></header>
  <main class="content">
    <p>This is the main content area. If it's short, the footer will still stick to the bottom.</p>
    <p>Scroll down if there's more content.</p>
  </main>
  <footer class="footer">
    <p>&copy; 2023 My Company</p>
  </footer>
</body>
*/

How it works: This snippet uses Flexbox to implement a "sticky footer." By setting `display: flex` and `flex-direction: column` on the `body`, and then applying `flex-grow: 1` to the main content area, the content section expands to fill all available vertical space, effectively pushing the footer to the very bottom of the viewport, regardless of how much content is present.

Implement a Sticky Footer with Flexbox

Need help integrating this into your project?