CSS
Flexbox Layout for Full-Height Page with Scrollable Main Content
Construct a web page layout where the header and footer have fixed heights, and the main content area dynamically fills the remaining vertical space, becoming scrollable if its content overflows, all powered by Flexbox.
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
.page-wrapper {
display: flex;
flex-direction: column;
height: 100%; /* Make the wrapper fill the viewport */
}
.header, .footer {
flex-shrink: 0; /* Prevent header/footer from shrinking */
padding: 15px;
background-color: #f0f0f0;
border-bottom: 1px solid #ddd;
}
.footer {
border-top: 1px solid #ddd;
border-bottom: none;
}
.main-content-scroll {
flex-grow: 1; /* Main content takes all available space */
overflow-y: auto; /* Enable vertical scrolling */
padding: 20px;
background-color: #fff;
}
How it works: This Flexbox layout ensures the header and footer maintain their size while the main content area expands to fill the remaining vertical space. `display: flex; flex-direction: column;` sets up a vertical flex container on the `.page-wrapper`. `flex-grow: 1;` on `.main-content-scroll` makes it consume all available space, and `overflow-y: auto;` ensures that only this section scrolls if its content exceeds its height, keeping the header and footer fixed. This requires a `.page-wrapper` containing `.header`, `.main-content-scroll`, and `.footer` elements.