CSS
Build a Sticky Footer Page Layout with Flexbox
Create a classic web page layout where the footer always stays at the bottom of the viewport, even if content is short, using Flexbox for flexible heights.
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.header {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
.main-content {
flex-grow: 1; /* Allows main content to take up available space */
padding: 20px;
background-color: #f0f0f0;
}
.footer {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
How it works: By setting `html` and `body` to `height: 100%` and applying `display: flex` with `flex-direction: column` to the body, a flexible vertical layout is established. The `.main-content` element uses `flex-grow: 1` to expand and consume all available vertical space, effectively pushing the `.footer` to the bottom of the viewport.