<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.