CSS
Sticky Footer Layout with CSS Flexbox
Implement a classic sticky footer layout ensuring the footer always stays at the bottom of the viewport, even when content is sparse, using Flexbox for robust placement.
html, body {
height: 100%;
margin: 0;
}
.flex-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures wrapper fills at least the viewport height */
}
.header {
background-color: #6c757d;
color: white;
padding: 20px;
}
.main-content {
flex: 1; /* This makes the content area grow and push the footer down */
background-color: #ffc107;
padding: 20px;
}
.footer {
background-color: #343a40;
color: white;
padding: 20px;
}
How it works: This snippet demonstrates how to create a 'sticky footer' layout using Flexbox. By setting the `min-height` of the `flex-wrapper` to `100vh` and applying `flex: 1` to the main content area, the content automatically expands to fill any available space. This ensures the footer is always pushed to the bottom of the viewport, regardless of how much content is present.