CSS
Implement a Sticky Footer using CSS Flexbox
Create a sticky footer that always stays at the bottom of the viewport, even with sparse content, using Flexbox to manage the main content area's growth.
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures body takes full viewport height */
margin: 0;
font-family: sans-serif;
}
header,
footer {
padding: 15px;
background-color: #333;
color: white;
text-align: center;
}
main {
flex-grow: 1; /* Allows main content to take up all available space */
padding: 20px;
background-color: #f9f9f9;
}
How it works: This Flexbox pattern elegantly solves the common sticky footer problem. The `body` is set as a flex container with `flex-direction: column` to stack its children vertically. `min-height: 100vh` ensures the body occupies the entire viewport. By applying `flex-grow: 1` to the `main` content area, it expands to consume all available vertical space, effectively pushing the `footer` to the very bottom of the viewport.