CSS

Creating a Sticky Footer Layout with Flexbox

Learn how to implement a classic sticky footer layout using CSS Flexbox, ensuring your footer always stays at the bottom of the viewport even with minimal content.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex-grow: 1; /* Pushes the footer down */
}

header, footer {
  /* Optional styling */
  padding: 1rem;
  background-color: #f0f0f0;
  text-align: center;
}

How it works: This snippet demonstrates how to create a sticky footer. By setting the `body` to `display: flex` with `flex-direction: column` and `min-height: 100vh`, the main content (`<main>`) is allowed to grow (`flex-grow: 1`), pushing the `<footer>` to the bottom of the viewport. If the content overflows the viewport, the footer will simply follow the content.

Creating a Sticky Footer Layout with Flexbox

Need help integrating this into your project?