CSS
Flexbox: Sticky Header and Footer with Scrollable Content Area
Create a full-height layout with a fixed header and footer, allowing only the main content area to scroll independently using Flexbox for robust and responsive application interfaces.
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
.app-layout {
display: flex;
flex-direction: column;
height: 100vh; /* Viewport height */
}
.header {
flex-shrink: 0; /* Prevents header from shrinking */
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
.main-content {
flex-grow: 1; /* Takes all available space */
overflow-y: auto; /* Enables vertical scrolling for content */
background-color: #f4f4f4;
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevents footer from shrinking */
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
How it works: This pattern creates a common application layout with a header and footer that stay fixed at the top and bottom of the viewport, respectively, while the middle `main-content` area scrolls independently. The `.app-layout` container uses `display: flex` and `flex-direction: column` to stack its children vertically. The `header` and `footer` have `flex-shrink: 0` to prevent them from shrinking. Crucially, the `main-content` uses `flex-grow: 1` to expand and fill the remaining vertical space, and `overflow-y: auto` to enable scrolling only within that section when its content exceeds its height.