CSS
Full-Height Page Layout with Flexbox
Implement a robust full-height page layout using Flexbox, making sure your footer always stays at the bottom and content expands vertically.
/* HTML Structure: */
/* <body>
/* <header>Header</header>
/* <main>Content</main>
/* <footer>Footer</footer>
/* </body> */
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures body takes full viewport height */
}
header,
footer {
padding: 20px;
background-color: #333;
color: white;
text-align: center;
}
main {
flex-grow: 1; /* Allows main content to take all available vertical space */
padding: 20px;
background-color: #f8f8f8;
}
How it works: This Flexbox setup creates a sticky footer or full-height layout. By setting `min-height: 100vh` on the `body` and `display: flex; flex-direction: column;`, the body becomes a flex container that stacks its children vertically. The `flex-grow: 1;` property on the `main` element makes it expand to fill all remaining vertical space, pushing the `footer` to the bottom of the viewport even if the content is short. `html, body { height: 100%; }` is crucial for `100vh` to behave correctly on some browsers.