CSS
Implementing a Sticky Footer with Flexbox
Create a classic sticky footer layout that stays at the bottom of the viewport even with sparse content, using CSS Flexbox for robust responsiveness.
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures wrapper takes at least full viewport height */
}
.header {
padding: 20px;
background-color: #333;
color: white;
}
.main-content {
flex: 1; /* Allows main content to grow and push footer down */
padding: 20px;
background-color: #f8f8f8;
}
.footer {
padding: 20px;
background-color: #666;
color: white;
text-align: center;
}
How it works: This code provides a standard sticky footer implementation using Flexbox. The `wrapper` element, set to `min-height: 100vh` and `display: flex; flex-direction: column;`, ensures it occupies at least the full viewport height. The `main-content` then uses `flex: 1` (shorthand for `flex-grow: 1; flex-shrink: 1; flex-basis: 0%`) to consume all available space, effectively pushing the `footer` to the bottom of the viewport.