CSS
Implement a Sticky Footer Layout Using Flexbox
Create a classic sticky footer layout that always stays at the bottom of the viewport, even with sparse content, using a simple Flexbox structure for robust web design.
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column; /* Stack children vertically */
}
.main-content {
flex-grow: 1; /* Pushes footer to the bottom */
padding: 20px;
background-color: #f9f9f9;
text-align: center;
min-height: 200px; /* Example min-height */
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
flex-shrink: 0; /* Prevent footer from shrinking */
}
How it works: By setting `body` to `display: flex` with `flex-direction: column`, its children (header, main content, footer) stack vertically. Applying `flex-grow: 1` to the `.main-content` area makes it expand to fill all available space, effectively pushing the footer to the bottom of the viewport, ensuring it's 'sticky'.