CSS
Full-Page Layout with Header, Main, and Footer using CSS Grid
Construct a common web page layout featuring a fixed header, scrollable main content area, and a sticky footer using CSS Grid's layout capabilities.
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
.grid-layout {
display: grid;
grid-template-rows: auto 1fr auto; /* Header (auto), Main (fills space), Footer (auto) */
min-height: 100vh; /* Ensures layout takes full viewport height */
}
header {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
main {
background-color: #f4f4f4;
padding: 1rem;
overflow-y: auto; /* Allows main content to scroll if it overflows */
}
footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
/* Example HTML structure for context
<body class="grid-layout">
<header>Page Header</header>
<main>
<h1>Main Content Area</h1>
<p>This is the main content. It can grow and scroll.</p>
<!-- Add more content to test scrolling -->
</main>
<footer>Page Footer</footer>
</body>
*/
How it works: This snippet provides a robust structure for common web page layouts. By setting `display: grid` on the `body` and `grid-template-rows: auto 1fr auto`, the header and footer take only the necessary height (`auto`), while the `main` content area expands to fill all remaining vertical space (`1fr`). `min-height: 100vh` ensures the layout always occupies the full viewport height.