JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="top">padding top of the wrapper must match the height of this div</div>
    <div class="middle">
        <div class="container">
            <p>the container div is to stop and top or bottom margins from p tags interfering with the middle div</p>
            <p>the box-sizing style needed for the wrapper is so the height will stay at what you set it at.  if you want better browser compatibility, remove this and the just subtract that top and bottom paddding from the height to give you the new height - in this example it would be 225px;</p>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum, magna at semper rutrum, libero nisl porttitor orci, sed cursus justo enim ac ipsum. Fusce faucibus purus in risus condimentum pulvinar. Duis tempor viverra mattis. Duis libero turpis, aliquam eget libero ac, iaculis interdum magna. Nunc sed convallis augue. Integer blandit molestie eros, a iaculis odio ultrices quis. Curabitur id augue semper, euismod dui vitae, accumsan magna. Suspendisse eget consequat purus. In id erat mauris. Aenean nec turpis varius, mattis erat a, hendrerit massa. Aliquam erat volutpat. Ut rutrum interdum erat, et volutpat odio tempus mollis. Vestibulum in dolor varius, malesuada dolor eu, fermentum enim. Integer pretium erat nunc, nec interdum leo interdum eu. In sem metus, euismod sit amet nibh a, bibendum tempor libero.

Integer eleifend sagittis ligula non congue. Donec suscipit eros vel sem congue viverra. Sed at viverra magna. Morbi semper orci sed mauris aliquam, non porttitor metus posuere. Curabitur auctor semper sagittis. Nunc rutrum massa nec aliquet feugiat. Donec libero est, venenatis ac tellus at, porttitor aliquet nibh. Pellentesque sodales gravida augue quis pretium. Phasellus non vulputate tortor. Fusce sed enim fringilla, venenatis augue non, adipiscing est.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos....

CSS

html,
body {height:100%; margin:0; padding:0;}

#wrapper {
    padding:100px 0 75px 0; /*padding top - height of header, padding-bottom - height of footer*/
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box; 
}

.container {padding:15px;}

.middle {
    min-height:100%;
    background-color:green;
    position:relative;
}
.top {
    margin-top:-100px; /*margin - height*/
    height:100px;
    background-color:red;
}
.bottom {
    margin-bottom:-75px;  /*margin - height*/
    height:75px;
    background-color:blue;
}