JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top"></div>

<div id="mid">

    <div id="sub">
    
        <div id="push"></div>
        <div id="inside">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
            
    </div>

</div>

<div id="bot"></div>

CSS

* {
    margin:        0;
}
html, body {
    margin:        0;
    height:        100%;
}
#top {
    position:    fixed;
    top:        0;
    height:        100px;
    width:        100%;
    background:    #f00;
    z-index:    2;
}
#mid {
    background:    #222;
    height:        100%;
    width:        100%;    
    position:    fixed;
    top:        100px;
}
#sub {
    height:        100%;
    width:        100%;
    position:    absolute;
    bottom:        150px;
}
#push {
    height:        150px;
}
#inside div {
    height:        50px;
    width:        200px;
    background:    #888;
    border:        1px solid #fff;
}
#bot {
    position:    fixed;
    bottom:        0;
    height:        50px;
    width:        100%;
    background:    #0ff;
    z-index:    2;
}