Fixed Header & Footer with Scrollable Main Content using CSS Grid

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Prevents body scrollbar */
}

.app-layout {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header, Main Content (flexible), Footer */
  height: 100vh; /* Container takes full viewport height */
}

header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

main {
  overflow-y: auto; /* Makes only the main content area scrollable */
  padding: 1rem;
  background-color: #f4f4f4;
}

footer {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

How it works: This snippet provides a common application layout where a header and footer remain fixed at the top and bottom of the viewport, while the main content area scrolls independently. It uses CSS Grid with `grid-template-rows: auto 1fr auto;` where `auto` allocates space based on content for header and footer, and `1fr` makes the main content area expand to fill the remaining space. `height: 100vh` on the container ensures it occupies the full viewport, and `overflow-y: auto` on the `main` element enables its content to scroll without affecting the fixed header/footer.