JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navTop">
    <h1>Title</h1>
    <nav>Dynamic menu</nav>
</div>
<div class="container">
    <section>Here the contentsHere the contentsHere Here the contentsHere </section>
</div>
<footer class="bottomFooter">
    Footer
</footer>

CSS

.navTop{
    width:100%;
    border:2px solid green;
    float:left;
}
.container{
    width:100%;
    float:left;
    overflow:scroll;
}
.bottomFooter{
    float:left;
    border:1px solid black;
    width:100%;
}

JavaScript

$(document).ready(function() {
  function setHeight() {
    var top = $('.navTop').outerHeight();
    var bottom = $('footer').outerHeight();
    var totHeight = $(window).height();
    $('section').css({ 
      'height': totHeight - top - bottom + 'px'
    });
  }

  $(window).on('resize', function() { setHeight(); });
  setHeight();
});