CSS
Build a Full-Page Header, Main, Footer Layout with CSS Grid
Structure a common web page layout, including a header, main content area, and footer, where the main content dynamically fills remaining vertical space using CSS Grid.
html, body {
height: 100%; /* Ensure html and body take full viewport height */
margin: 0;
}
.page-wrapper {
display: grid;
grid-template-rows: auto 1fr auto; /* Header height, main content fills space, footer height */
min-height: 100vh; /* Ensure the wrapper takes full viewport height */
}
.header {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
.main-content {
background-color: #ffffff;
padding: 20px;
}
.footer {
background-color: #333333;
color: white;
padding: 15px;
text-align: center;
}
<!-- HTML Structure -->
<div class="page-wrapper">
<header class="header">
<h1>Site Header</h1>
</header>
<main class="main-content">
<p>This is the main content of the page. It will expand to fill the available space.</p>
<p>More content here...</p>
</main>
<footer class="footer">
© 2023 All Rights Reserved
</footer>
</div>
How it works: This snippet constructs a common full-page layout using CSS Grid. The `page-wrapper` is set to `display: grid` with `grid-template-rows: auto 1fr auto`. This configuration allocates `auto` height for the header and footer (they take only the space their content needs), while `1fr` ensures the `main-content` area takes up all the remaining vertical space, adapting fluidly to different content lengths.