JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<header>DIV 1 - 50PX</header>

<div class="main">MAIN STUFF - RELATIVE</div>

<footer>DIV 2 - 50PX</footer>
    
</body>

CSS

body, html{
        width:100%;
        height:100%;
    }
    
    body{
        margin:0;
        positino:relative;
    }
    
    header{
        position:absolute;
        width:100%;
        height:50px;
        top:0;
        left:0;
        background:#666666;
        color:#ffffff;
        z-index:10;
    }
    
    footer{
        position:absolute;
        width:100%;
        height:50px;
        bottom:0;
        left:0;
        background:#555555;
        color:#ffffff;
        z-index:10;
    }
    
    .main{
        position:relative;
        box-sizing:border-box;
        padding:50px 1em;
        height:150%; /* this is to simulate your dynamic content */
        background:#cccccc;
    }