CSS
Fixed Header and Footer Layout with Scrollable Content using CSS Grid
Implement a common web layout featuring a fixed header, a fixed footer, and a scrollable main content area using the power of CSS Grid for optimal structure.
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
overflow: hidden; /* Prevent body scrollbar, content area will scroll */
}
.page-layout {
display: grid;
grid-template-rows: auto 1fr auto; /* Header (auto), Content (fills space), Footer (auto) */
height: 100%; /* Make sure the grid fills the viewport height */
background-color: #f8f8f8;
}
.header {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.main-content {
background-color: #ffffff;
padding: 30px;
overflow-y: auto; /* Enable vertical scrolling for the content area */
box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}
.footer {
background-color: #34495e;
color: white;
padding: 15px;
text-align: center;
box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}
/* Example usage in HTML:
<div class="page-layout">
<header class="header"><h1>My Awesome App</h1></header>
<main class="main-content">
<p>This is the main scrollable content area.</p>
<p>... (add lots of content here to make it scroll) ...</p>
<p>End of content.</p>
</main>
<footer class="footer"><p>© 2023 My Company</p></footer>
</div>
*/
How it works: This snippet creates a common web page layout where the header and footer remain fixed at the top and bottom of the viewport, respectively, while the main content area is scrollable. By setting `display: grid` on the `.page-layout` container and `grid-template-rows: auto 1fr auto`, the header and footer take only the space they need (`auto`), and the `main-content` area (`1fr`) expands to fill the remaining available vertical space. Crucially, `overflow-y: auto` on `.main-content` ensures that only the content area scrolls if its content exceeds its height.