CSS

Implement a Sticky Footer Layout with CSS Flexbox

Ensure your footer always stays at the bottom of the viewport, even with sparse content, using a simple and effective CSS Flexbox technique. Essential for consistent page layouts.

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

.main-content {
  flex-grow: 1; /* Pushes footer down */
  padding: 20px;
  background-color: #f9f9f9;
}

.footer {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}
How it works: This snippet demonstrates how to create a sticky footer layout using CSS Flexbox. By applying `display: flex` and `flex-direction: column` to the `body`, we arrange content vertically. The `min-height: 100vh` ensures the body takes up at least the full viewport height. Crucially, `flex-grow: 1` on the `.main-content` element makes it expand to fill all available space, effectively pushing the `.footer` to the very bottom of the page, even when content is short.

Related CSS Snippets

Need help integrating this into your project?

Our team of expert developers can help you build your custom application from scratch.

Hire DigitalCodeLabs