Grid fixed footer

by scrimothy

HTML

<div class="container">
  <header>Header</header>
  <div class="body">
    <div class="body-content">Body (scrollable)</div>
  </div>
  <footer>Footer</footer>
</div>

CSS

.container {
  display: grid;
  grid-template:
    "header" auto
    "body" 1fr
    "footer" auto;
}

.body {
  overflow: auto;
}


/* presentation styles only */
.container {
  height: 250px;
  width: 250px;
  border: 2px solid gray;
}
.body {
  padding: 12px;
}

.body-content {
  height: 5000px;
}
header,
footer {
  flex: 0 0 auto;
  padding: 12px;
  border: 1px dashed magenta;
}