CSS

Implement a Responsive Sticky Footer with Flexbox

Learn how to create a classic sticky footer layout that always stays at the bottom of the viewport, even if the page content is short, using modern CSS Flexbox techniques for robust responsiveness.

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

.content {
  flex: 1; /* Allows content to grow and push footer down */
  padding: 20px;
  background-color: #f9f9f9;
}

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

.header {
    background-color: #eee;
    padding: 15px;
    text-align: center;
}

/* HTML Context */
/*
<div class="header">Header</div>
<div class="content">
  <h1>Page Content</h1>
  <p>This is the main content of the page. It can be short or long.</p>
</div>
<div class="footer">Footer &copy; 2023</div>
*/

How it works: By setting `body` to `display: flex` with `flex-direction: column` and `min-height: 100vh`, the header, content, and footer stack vertically. The `.content` element is given `flex: 1`, allowing it to grow and occupy all available vertical space, effectively pushing the footer to the bottom of the viewport.

Implement a Responsive Sticky Footer with Flexbox

Need help integrating this into your project?