JSFiddle - React, Tailwind, and code Playground

HTML

<div id='header'>
  header
  <p>
    another line
  </p>
</div>
<div id='container'>
  Main body text
</div>

<div id='fooater'>
Footer
</div>

CSS

* {margin: 0; padding: 0;}
#header {}

#container {
  background: blue;
}

JavaScript

var resize = function(){
	var header_height = 0;
  var footer_height = 0;
  var window_height = window.innerHeight;
    
  header_height = document.getElementById('header').offsetHeight;
  footer_height = document.getElementById('footer').offsetHeight;
  
  var container_height = (window_height - (header_height + footer_height));
	
  document.getElementById('container').style.height = container_height + 'px';
}

window.onresize = resize;
resize();