JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles/index.css"/>
        <script>
            function adjustHeight() {

                var header = document.getElementById("header");
                var container = document.getElementById("container");
                
                container.style.top = header.clientHeight + "px";
            }
        </script>
    </head>
    <body>
        <div id="header">
            <p id="p">
                Line1<br/>
                Line2<br/>
                Line3<br/>
                Line4<br/>
            </p>
            <div id="toggle">Toggle</div>
        </div>
        <div id="container">
            <script>adjustHeight();</script>
            <div id="content">
                First row visible<br/><br/>
                Scrollbar shows normally<br/>
                Body doesnt scroll<br/>
                Works on resize too (by default)<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
                One row..<br/>
    ...

CSS

html, body, p {
    margin:0;
    padding:0;
}

p {
    overflow: hidden;
}

html,
body,
#content {
    height:100%;
    width:100%;
    /**
    overflow:hidden;
    /**/
}

#toggle {
    padding: 10px;
    background-color: green;
}

#container {
    width:100%;
    background-color: red;
    overflow: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.collapsed {
    height: 0;
}

JavaScript

function toggle() {
    var par = document.getElementById("p");
    Utils.getInstance().toggleClass( par, "collapsed");
    adjustHeight(); // 'Key' action
}

function attachEvents() {

    var utilsInstance = Utils.getInstance();
    
    var toggler = document.getElementById("toggle");
    utilsInstance.addEvent( toggler, "click", toggle );
}
// Invocation at the bottom

// Some library stuff
window.Utils = (function() {

    var instance;

    var UtilsContructor = function Utils() {

        var that = this;

        this.addEvent = function(element, type, handler) {

            // src: http://dean.edwards.name/my/events.js
            
            if (element.addEventListener) {

                element.addEventListener(type, handler, false);

            } else {

                if (!handler.$$guid) handler.$$guid = this.addEvent.guid++;

                if (!element.events) element.events = {};

                var handlers = element.events[type];
                if (!handlers) {
                    handlers = element.events[type] = {};

                    if (element["on" + type]) {
                        handlers[0] = element["on" + type];
                    }
                }

                handlers[handler.$$guid] = handler;

                element["on" + type] = this.handleEvent;
            }
        }

        this.addEvent.guid = 1;

        this.removeEvent = function(element, type, handler) {

            if (element.removeEventListener) {

                element.removeEventListener(type, handler, false);

            } else {

                if (element.events && element.events[type]) {

                    delete element.events[type][handler.$$guid];
                }
            }
        };

        this.handleEvent = function(event) {

            var returnValue = true;

            event = event || that.fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);

            var handlers =...