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

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