JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="header">Header
    <div class="sub-header">Sub-Header</div>
</div>
<div class="main-content">Auto adjust size</div>
<div class="footer">footer</div>
</body>

CSS

body, html {
    padding: 0;
    margin: 0;
}
.header {
    padding-top: 5px;
    background-color: red;
    width: 100%;
}
.sub-header {
    padding: 5px;
    margin: 0px;
    background-color: yellow;
    width: 100%;
}
.main-content {
    padding: 5px;
    background-color: blue;
    width: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    padding: 5px;
    background-color: green;
    width: 100%;
}
@media screen and (max-width: 320px) {
    .sub-header {
        display: none;
    }
}
}

JavaScript

/* (function($){...})(jQuery)
 * is shorthand for the more familar
* $(document).ready(function(){ ... });
*/

(function($){

 // The '$' in front of the variable is just a convention
 // when specifying variables which are jQuery selectors
 var $header = $('.header');
 var $subHeader = $('.sub-header');
 var $mainContent = $('.main-content');
 var $footer = $('.footer');
    
 function getRequiredHeight(){
    var requiredHeight = 0;
    var headerHeight = $header.height();
    var subHeaderHeight = $subHeader.height();
    var footerHeight = $footer.height();
     
    // This returns the full height of the browser window 
    var windowHeight = $(window).height();
    
     // So, the required height is:
     requiredHeight = windowHeight - headerHeight - subHeaderHeight - footerHeight;
     
     //uncomment the line below to see the values in a console window in dev tools
     //console.log(requiredHeight + ' = ' + windowHeight +' - '+ headerHeight +' - '+ subHeaderHeight +' - '+ footerHeight );
     
     return requiredHeight;
 }
  
  // Now we know the required .main-content height, 
  // we can apply it to the .main-content div
 $mainContent.height(getRequiredHeight());

 // Now this will work fine on page load, 
 // but you mentioned you'd like to resize the window and still
 // have the .main-content div resized.
 // To achieve this we'll need to keep resetting the .main-content
 // div height any time the page is resized. We'll set an 'event
 // handler' to listen for an event (page resize) and, upon detecting it
 // re-execute our 'getRequiredHeight' function
  
 $(window).resize(function(){
    //The line below will execute anytime the browser is resized
    $mainContent.height(getRequiredHeight())
 });
    
})(jQuery);