JSFiddle - React, Tailwind, and code Playground

by geekrose Lee

HTML

<div class="Wrapper">
    <div class="Header">header</div>
    <div class="Content">Content</div>
    <div class="FooterPush"></div>
  </div>
  <div class="Footer">Footer</div>

CSS

*{margin: 0;padding: 0;}
   
html, body{height: 100%;}
.Header{background:blue; height:50px} 
.Content{overflow:auto; position: absolute; width:100%; top:50px; bottom:50px;}
.Wrapper{min-height: 100%;}
.Wrapper .FooterPush{height: 50px;}
.Footer{clear: both;position: relative;margin-top: -50px;height: 50px;background:red;}