JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout">
  <header>111</header>
  <div class="main">111</div>
  <footer>111</footer>
</div>

CSS

html, body {height: 100%; margin: 0;}
.layout {display: flex; flex-direction: column; height: 100%;}
header {flex: 0 0 auto;}
.main {flex: 1 0 auto;}
footer {flex: 0 0 auto;}