CSS

Build a Sticky Footer with CSS Flexbox

Implement a classic sticky footer layout that stays at the bottom of the viewport even when content is short, or pushes down with long content, using Flexbox.

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

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%; /* Ensures wrapper takes full viewport height */
}

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

.header, .footer {
  flex-shrink: 0; /* Prevents header/footer from shrinking */
  padding: 15px;
  background-color: #eee;
}
How it works: This snippet creates a "sticky footer" layout using Flexbox. By setting `min-height: 100%` on the `.wrapper` (which is a flex container with `flex-direction: column`), and giving `.main-content` `flex-grow: 1`, the main content area expands to fill all available space, pushing the footer to the bottom. If the content is longer than the viewport, the footer will be pushed further down, appearing after the content.

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