JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div id='header'></div>
<div id='content'></div>
<div id='footer'></div>

CSS

#header {
  position: fixed;
  top: 0;
  height: 50px;
  background: blue;
  width: 100%;
}

#footer {
  position: fixed;
  bottom: 0;
  height: 20px;
  background: red;
  width: 100%;
}

#content {
  width: 100%;
  background: orange;
}

JavaScript

$(window).resize(function() {
  var height = $(this).height() - $("#header").height() + $("#footer").height()
  $('#content').height(height);
})

$(window).resize(); //on page load