<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>
html,body{
  margin:0;
  padding:0;
}
.parent{
 display: grid;
 min-height:100vh;
 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;
  background:green;
  display:grid;
}
.footer {
 grid-column: 1;
 grid-row: 3;
}
.whatever{background:cyan;}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.