CSS
Full-Page Layout with Fixed Header, Footer, and Scrollable Main Content using CSS Grid
Design a classic web layout where the header and footer remain fixed in view, while the main content area is independently scrollable, achieved efficiently with CSS Grid.
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
.grid-layout-container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100%;
overflow: hidden;
}
header {
background-color: #4CAF50;
color: white;
padding: 1rem;
text-align: center;
}
main {
background-color: #f9f9f9;
padding: 1rem;
overflow-y: auto;
}
footer {
background-color: #333;
color: white;
padding: 0.8rem;
text-align: center;
font-size: 0.9em;
}
/* HTML Structure for context:
<div class="grid-layout-container">
<header><h1>Site Title</h1></header>
<main>
<p>This is the main content area.</p>
<p>It will become scrollable if there's too much content.</p>
<div style="height: 1000px; background-color: #eee; text-align: center; padding-top: 50px;">
Lots of scrollable content here!
</div>
</main>
<footer>© 2023 My Website</footer>
</div>
*/
How it works: This CSS Grid layout creates a full-page structure with a fixed header, a fixed footer, and a main content area that scrolls independently. `grid-template-rows: auto 1fr auto` allocates space: `auto` for the header and footer (they take only the space their content needs), and `1fr` for the main content, making it fill all remaining vertical space. `overflow: hidden` on the container prevents the body from scrolling, and `overflow-y: auto` on the `main` element ensures that only this section scrolls when its content overflows, keeping the header and footer static.