JSFiddle - React, Tailwind, and code Playground

HTML

<div id='header'></div>
<div id='content'>
    <div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>

CSS

body {
    height:100%;
}
#header {
    width:100%;
    height:15%;
    position:absolute;
    top:0;
    background:red;
    margin:0;
}

#footer {
    width:100%;
    height:15%;
    position:absolute;
    bottom:0;
    background:blue;

}

#content {
    position:absolute;
    width:100%;
    top:15%;
    height : 70%;
    background:yellow;
    overflow-y:auto;
}
#content #scrollable {
     min-height:100%;
}