JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>Title</header>
    <div role="main" id="content">
        <section>
Hello<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />World!
        </section>
    </div>
    <footer>copyright</footer>
</body>

CSS

html
{
    overflow: hidden;
    height: 100%;
}

header, footer
{
    background: #72CEF2;
    padding: 9px 0;
    width: 100%;
    position: fixed;
    height: 40px;
    text-align: center;
}

header{top:0;}
footer{bottom:0;}

div[role="main"]
{
    overflow-y: scroll;
    margin: 60px 0 0 0;
    border:1px solid red;
}

section
{
    width: 400px;
    margin: 0 auto;
}

JavaScript

var doc_height = $(window).innerHeight();

var header_height = $("header").height();
var footer_height = $("footer").height();

var div_height = doc_height - (header_height + footer_height);
    
$("#content").css({
    "height": (div_height - footer_height) + "px",
    "margin-bottom": footer_height + "px"
});

alert($("#content").height());
//alert(div_height);