JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">header</div>

<div id="content">content first<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content last<br /></div>

<div id="footer">footer</div>

CSS

html, body { 
    margin: 0; 
    padding: 0;
}

#header, #footer {
    width: 100%;
    height: 100px; /* needs to be a fixed width! */
    position: fixed;
    top 0;
    background: lightgreen;
}
#footer {
    bottom: 0;
}
#content {
    width: 100%;
    position: fixed;
    top: 100px;
    bottom: 100px;
    overflow: auto;
    background: lightblue;
}