CSS

Simple Sticky Footer with Flexbox

Implement a sticky footer that always stays at the bottom of the viewport, even with minimal content, using a simple and effective Flexbox technique for modern web layouts.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure body takes full viewport height */
  margin: 0; /* Remove default body margin */
}

.content-wrap {
  flex: 1; /* This pushes the footer down */
}

.header, .footer {
  padding: 1rem;
  background-color: #333;
  color: white;
  text-align: center;
}

How it works: This snippet provides a straightforward method to create a sticky footer using Flexbox. By setting the `body` to `display: flex` with `flex-direction: column` and `min-height: 100vh`, the body container spans the entire viewport height. The key is applying `flex: 1` to a wrapper element (`.content-wrap`) that contains the main content. This property makes the content wrapper grow and fill all available space, effectively pushing the footer to the bottom of the viewport even when the page content is short.

Simple Sticky Footer with Flexbox

Need help integrating this into your project?