JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar">Navbar</div>

<div id="home-content">
    
    <div class="container">
        
        <div class="home-logo">Logo Placeholder</div>
        
        <div id="login-form">
            <p>Login Form</p>
            <p>lorem</p>
            <p>ipsum</p>
            <p>dolar</p>
            <p>sit</p>
            <p>amet</p>
        </div>
        
        <div id="home-banner">
            Banner - 100% Height (Excluding .navbar, .home-logo, #login-form, #footer, .s-info )
        </div>
        
    </div>
    
    <div class="s-info"><p>Some Information</p></div>
    
    <div id="footer">
        <h1>Footer</h1>
        <p>Dummy Content</p>
    </div>
    
</div>

CSS

html,body{height:100%;padding:0;margin:0;font-family:Verdana, Geneva, sans-serif;font-size:14px;}
.navbar{height:84px;background:yellow;border:0;border-bottom:1px solid #000;}
.home-logo{background:#999;margin:50px 0;height:90px;}
#login-form{padding:20px 0;background:#ccc;}
.s-info{padding:10px 0;background:#666;}
#footer{padding:0;background:#eee;}
#footer p{margin:0;padding:0;}
#footer h1{padding:0;margin:0;}
#home-banner{background:red;text-align:center;color:#fff;font-weight:bold;}

JavaScript

$(document).ready(sizeContent);

$(window).resize(sizeContent);

function sizeContent() {
	var newHeight = $("html").height() - $(".navbar").height() - $(".home-logo").height() - $("#login-form").height() - $(".s-info").height() - $("#footer").height() + "px";
    
	$("#home-banner").css("height", newHeight );
	
	alert('Navbar Height:  ' + $(".navbar").height()); // 84
	alert('Home Logo Height:  ' + $(".home-logo").height()); // 93
	alert('Login Form Height:  ' + $("#login-form").height()); // 200
	alert('Banner Height:  ' + $("#home-banner").height()); // 442
	alert('S Info Height:  ' + $(".s-info").height()); // 45
	alert('Footer Height:  ' + $("#footer").height());  // 51
	
	alert('HTML Height:  ' + $("html").height());
}