Easy Sticky Header/Footer

A very simple approach to creating both a “sticky header” and “sticky footer” using grid.

CSS

    .container {
      display: grid;
      height: 100vb;
      grid-template-rows: auto 1fr auto;
    }

    .content {
      overflow: auto;
    }

HTML

    <div class="container">
      <header>Header</header>
      <main class="content">Content</main>
      <footer>Footer</footer>
    </div>

Tailwind

    <div class="grid h-[100vb] grid-rows-[auto_1fr_auto]">
      <header>Header</header>
      <main class="overflow-auto">Content</main>
      <footer>Footer</footer>
    </div>

Demo

The demo below is plain markup. The header and footer stay put because the middle row is 1fr and scrolls; there is no script involved.

Header

Peter Piper picked a peck of pickled peppers.

A peck of pickled peppers Peter Piper picked.

If Peter Piper picked a peck of pickled peppers,

Where’s the peck of pickled peppers Peter Piper picked?

Peter Piper picked a peck of pickled peppers.

A peck of pickled peppers Peter Piper picked.

If Peter Piper picked a peck of pickled peppers,

Where’s the peck of pickled peppers Peter Piper picked?

Peter Piper picked a peck of pickled peppers.

A peck of pickled peppers Peter Piper picked.

If Peter Piper picked a peck of pickled peppers,

Where’s the peck of pickled peppers Peter Piper picked?

Peter Piper picked a peck of pickled peppers.

A peck of pickled peppers Peter Piper picked.

If Peter Piper picked a peck of pickled peppers,

Where’s the peck of pickled peppers Peter Piper picked?

Peter Piper picked a peck of pickled peppers.

A peck of pickled peppers Peter Piper picked.

If Peter Piper picked a peck of pickled peppers,

Where’s the peck of pickled peppers Peter Piper picked?

Footer