CSS
Full-Height Layout with Flexbox for Header, Main, Footer
Implement a common web layout using Flexbox, making the main content area dynamically fill all remaining vertical space between a fixed-height header and footer.
html, body {
height: 100%; /* Essential for body to fill viewport height */
margin: 0;
font-family: Arial, sans-serif;
}
.page-wrapper {
display: flex;
flex-direction: column; /* Stack items vertically */
min-height: 100%; /* Ensure wrapper takes full height even with short content */
}
header {
background-color: #333;
color: white;
padding: 1rem;
flex-shrink: 0; /* Prevent header from shrinking */
}
main {
flex-grow: 1; /* Main content grows to fill available vertical space */
background-color: #f4f4f4;
padding: 1.5rem;
overflow-y: auto; /* Add scrollbar if content overflows */
}
footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
flex-shrink: 0; /* Prevent footer from shrinking */
}
How it works: This Flexbox layout creates a common full-height page structure with a header, a main content area, and a footer. By setting the `html` and `body` to `height: 100%` and the `page-wrapper` to `min-height: 100%` with `display: flex` and `flex-direction: column`, the children are stacked vertically. The `main` element is given `flex-grow: 1`, allowing it to expand and consume all available vertical space. `header` and `footer` have `flex-shrink: 0` to prevent them from shrinking below their intrinsic height.