<div class="screen">
  <div class="content"></div>
  <div class="footer-1">
    
  </div>
  <div class="footer-2"></div>
</div>
.screen {
  min-height: 100vh;
  background-color: purple;
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  background-color: green;
}



.footer-1 {
  background-color: red;
  height: 50px;
}

.footer-2 {
  background-color: blue;
  height: 50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.