CSS
CSS Flexbox Sticky Footer Layout
Implement a classic sticky footer layout with CSS Flexbox, ensuring your footer always remains at the bottom of the viewport even with minimal content above it.
html, body {
height: 100%; /* Important for the body to fill the viewport */
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures the container fills the viewport height */
}
.content-wrap {
flex: 1; /* Allows this section to grow and push the footer down */
padding: 20px;
}
.page-footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.page-header {
background-color: #f8f8f8;
padding: 15px;
text-align: center;
}
How it works: This Flexbox snippet solves the common 'sticky footer' problem. By setting `min-height: 100vh` on the `.page-container` and `flex-direction: column`, the content is arranged vertically. The `.content-wrap` then uses `flex: 1` (shorthand for `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0%`) to occupy all available vertical space, effectively pushing the `.page-footer` to the very bottom of the viewport, regardless of the amount of content.