CSS
Create a Responsive Sticky Footer Layout Using Flexbox
Implement a classic sticky footer that always stays at the bottom of the viewport, even with sparse content, using Flexbox for robust layout control.
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column; /* Stack header, main, footer vertically */
min-height: 100vh; /* Ensures body takes at least full viewport height */
}
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: #f4f4f4;
}
How it works: This CSS snippet creates a classic sticky footer layout. By setting `html` and `body` to `height: 100%` and applying `display: flex; flex-direction: column; min-height: 100vh;` to the `body`, we ensure the main content (`main`) can grow to fill any available vertical space using `flex-grow: 1`. This pushes the `footer` to the bottom of the viewport, regardless of how much or little content is in the `main` section.