CSS
Responsive Full-Page Layout with Sticky Header and Footer using CSS Grid
Create a robust, responsive full-page layout where the header and footer remain sticky, and the main content area occupies the remaining vertical space using CSS Grid.
body {
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Main content, Footer */
min-height: 100vh;
margin: 0;
}
header {
background-color: #333;
color: white;
padding: 1rem;
grid-row: 1;
position: sticky; /* For header stickiness */
top: 0;
z-index: 100;
}
main {
padding: 1rem;
background-color: #f0f0f0;
grid-row: 2;
overflow-y: auto; /* Allow main content to scroll if too tall */
}
footer {
background-color: #333;
color: white;
padding: 1rem;
grid-row: 3;
position: sticky; /* For footer stickiness */
bottom: 0;
z-index: 100;
}
/* Example content for demonstration */
body > * {
border: 1px dashed #ccc;
}
/* <!-- HTML STRUCTURE --> */
<body class="grid-layout">
<header>
<h1>My Awesome Site Header</h1>
</header>
<main>
<p>This is the main content area. It will grow to fill the available space.</p>
<p>Scroll down to see the sticky footer!</p>
<!-- Add more content to enable scrolling -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>More content here.</p>
</main>
<footer>
<p>© 2023 My Site Footer</p>
</footer>
</body>
How it works: This snippet demonstrates how to create a full-page layout using CSS Grid where the `header` and `footer` are sticky, and the `main` content area dynamically takes up the remaining vertical space. By setting `body` to `display: grid` and defining `grid-template-rows: auto 1fr auto;`, the header and footer get just enough height (`auto`), while the main content (`1fr`) expands to fill the rest. `min-height: 100vh` ensures the grid always occupies the full viewport height. The `position: sticky` on header and footer makes them fixed while scrolling.