<div class="parent">
  <div class="header">Header</div>
  <div class="content">
    <div class="whatever">
      <p>whatever</p>
      <p>whatever</p>
      <p>whatever</p>
      <p>whatever</p>
      <p>whatever</p>
      <p>whatever</p>
    </div>
  </div>
  <div class="footer">footer</div>
</div>

.parent{
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: 3rem auto 3rem;
     position relative;
  background:red;
}
.header {
        grid-column: 1;
        grid-row: 1;
}
.content {
        grid-column: 1;
        grid-row: 2;
}
.footer {
        grid-column: 1;
        grid-row: 3;
}
.whatever{background:cyan;}