Page Shell Rows

A small page shell uses CSS Grid rows so the header and footer keep their size while main content takes the leftover space.

Program

Grid rows can make a page frame without JavaScript: header first, main content in the flexible middle, footer last.

page_shell_rows.html

<style>
.page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
header, main, footer { padding: 16px; }
main { background: #f8fafc; }
</style>
<div class="page">
  <header>Store status</header>
  <main id="content">Orders are ready to review.</main>
  <footer>Need help?</footer>
</div>

grid rows grid-template-rows describes the vertical tracks in a grid container.

flexible middle 1fr gives the main area the remaining height after the header and footer take what they need.