CSS
Implement a Robust Sticky Footer with Flexbox
Discover the elegant way to create a 'sticky footer' that always stays at the bottom of the viewport on short content pages and pushes down on longer pages using Flexbox.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main {
flex-grow: 1;
padding: 20px;
}
footer {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
How it works: This Flexbox snippet ensures your footer always 'sticks' to the bottom of the viewport. By applying `display: flex;` and `flex-direction: column;` to the `body` (or a main wrapper), its children are stacked vertically. `min-height: 100vh;` makes the container at least the full height of the viewport. The `main` content area gets `flex-grow: 1;`, which tells it to expand and consume all available vertical space, effectively pushing the `footer` to the bottom. If the content is longer than the viewport, the footer will simply follow the content.