Sticky header and footer

source: https://codepen.io/anthonyLukes/pen/DLBeE

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

header {
  flex: 0 0 auto;
  display: flex;
}

main {
  flex: 1 1 auto;
  position: relative;
  overflow-y: auto;/* need this to position inner content */
}

footer {
  flex: 0 0 auto;
}

<div class="container">
  <header>this</header>
  <main>is</main>
  <footer>awesome</footer>
</div>