CSS
Implement a Sticky Footer with CSS Flexbox
Ensure your footer always "sticks" to the bottom of the viewport, even on pages with minimal content, using a simple and effective CSS Flexbox layout structure.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures the wrapper takes at least full viewport height */
}
.header {
background-color: #f8f8f8;
padding: 20px;
text-align: center;
border-bottom: 1px solid #eee;
}
.content {
flex: 1; /* This makes the content area grow to fill available space */
padding: 20px;
background-color: #ffffff;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
How it works: This pattern creates a 'sticky footer' that remains at the bottom of the viewport, even when page content is short. By setting the `html` and `body` height to 100%, and the `.wrapper` to `min-height: 100vh` with `flex-direction: column`, the `.content` area uses `flex: 1` to consume all available vertical space, effectively pushing the `.footer` to the bottom of the page or viewport.