<div class="container">
  <div class="header">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
.container {
  display: flex;
  flex-direction: column;
  height: 70vh;
  width: 30vw;
  margin: 2rem;
}

.header, .footer {
  padding: 10px;
  background-color: #784367;
  color: white;
}

.content {
  flex-grow: 1;
  padding: 10px;
  background-color: #e6c037;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.