JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topbar">
    <a href="#t1">T1</a>
    <a href="#t2">T2</a>
    <a href="#t3">T3</a>
</div>
<div id="container">
    <div id="t1"><h1>See me?</h1></div>
    <div id="t2"><h1>See me?</h1></div>
    <div id="t3"><h1>See me?</h1></div>
</div>

CSS

body {height:100%;}
#container{font-family:sans-serif; color:#fff; margin-top:100px; overflow:auto;}

#topbar {background:red; height:100px; width:100%; position:fixed; top:0;}

#t1 {height:700px; background:blue;}
#t2 {height:700px; background:green;}
#t3 {height:700px; background:blue;}

JavaScript

var container = $('#container');

// SET HEIGHT
var windowHeight = $(window).height()-100;
container.height(windowHeight);

$(window).resize(function() {
    // SET HEIGHT AFTER RESIZE
    var windowHeight = $(window).height()-100;
    container.height(windowHeight);
});