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>
        </div>
    </div>
    <div class="bottom">padding bottom of the wrapper must match the height of this div</div>
</div>

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;
}