CSS
Sticky Footer using Flexbox
Implement a classic sticky footer layout with Flexbox, ensuring the footer always stays at the bottom of the viewport, even if the content is sparse. Provides robust and clean layout solution for web pages.
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
How it works: This Flexbox solution creates a 'sticky footer'. The `html` and `body` elements are set to `height: 100%`. The `body` is then turned into a flex container with `flex-direction: column`. The `.content` area uses `flex-grow: 1` to expand and take up all available vertical space, pushing the `.footer` to the very bottom of the viewport. This ensures the footer always stays 'stuck' to the bottom, regardless of the amount of content above it.