<div class="wrapper">
  <header class="page-header">Header</header>
  <main class="page-main">Main</main>
  <footer class="page-footer">Footer</footer>
</div>
* {
  margin: 0;
}

body {
  color: white;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrapper > * {
  padding: 20px;
}

.page-header {
  background: #592E83;
}

.page-main {
  flex-grow: 1;
  background: #331E4D;
}

.page-footer {
  background: #9984D4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.