<div class="wrapper">
  <header>Header</header>
  <section>
    <nav>Nav</nav>
    <main>Main</main>
    <aside>Aside</aside>
  </section>
  <footer>Footer</footer>
</div>
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

section {
  flex: 1;
  display: flex;
}

main {
  flex: 1;
}


header, nav, main, aside, footer {
  border: 4px solid;
  padding: 20px;
  text-align: center;
}

header {
  border-color: hsl(360deg 100% 50%);
  background-color: hsl(360deg 100% 50% / 0.2);
}

nav {
  border-color: hsl(30deg 100% 50%);
  background-color: hsl(30deg 100% 50% / 0.2);
}

main {
  border-color: hsl(180deg 100% 30%);
  background-color: hsl(180deg 100% 30% / 0.2);
}

aside {
  border-color: hsl(210deg 100% 50%);
  background-color: hsl(210deg 100% 50% / 0.2);
}

footer {
  border-color: hsl(300deg 100% 50%);
  background-color: hsl(300deg 100% 50% / 0.2);
}

body {
  padding: 0;
}

html, body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.