CSS

Implement a Robust Sticky Footer Layout with CSS Flexbox

Create a reliable sticky footer layout that always rests at the bottom of the viewport, even on pages with minimal content, using CSS Flexbox properties like `flex-direction` and `flex-grow`.

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

body {
  display: flex;
  flex-direction: column; /* Stack header, main, footer vertically */
}

.main-content {
  flex-grow: 1; /* Allows main content to take up all available space */
  padding: 20px;
}

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

How it works: This snippet creates a classic 'sticky footer' layout. By setting `display: flex` and `flex-direction: column` on the `body`, and `flex-grow: 1` on the `.main-content`, the main content area expands to fill all available vertical space, pushing the footer to the bottom of the viewport. The header and footer maintain their intrinsic heights.

Implement a Robust Sticky Footer Layout with CSS Flexbox

Need help integrating this into your project?