JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<div></div>
<footer></footer>

CSS

header {
    background: blue;
    height: 100px;
}

footer {
    background: black;
    height: 100px;
}

div {
    background: red;
}

JavaScript

$(function() {
  //Keeping it responsive while avoiding vertical scroll bars ..always
  var resize = function() {
      var a = $('header').height() + $('footer').height();
      var b = $(window).height() - a;

      $('div').css({
        'max-height': b,
        'height': b
      });
  };
  resize();
    
  $(window).on('resize', resize);
});