JSFiddle - React, Tailwind, and code Playground
HTML
<div id="header">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
</div>
<div id="main">
<ul>
<li>1 Lorem ipsum dolor sit amet</li>
<li>2 Lorem ipsum dolor sit amet</li>
<li>3 (1 and 2 are covered by the header)</li>
<li>4 Lorem ipsum dolor sit amet</li>
<li>5 Lorem ipsum dolor sit amet</li>
<li>6 Lorem ipsum dolor sit amet</li>
<li>7 Lorem ipsum dolor sit amet</li>
<li>8 Lorem ipsum dolor sit amet</li>
<li>9 Lorem ipsum dolor sit amet</li>
<li>10 Lorem ipsum dolor sit amet</li>
<li>11 Lorem ipsum dolor sit amet</li>
<li>12 Lorem ipsum dolor sit amet</li>
<li>13 Lorem ipsum dolor sit amet</li>
<li>14 Lorem ipsum dolor sit amet</li>
<li>15 Lorem ipsum dolor sit amet</li>
<li>16 Lorem ipsum dolor sit amet</li>
<li>17 Lorem ipsum dolor sit amet</li>
<li>18 Lorem ipsum dolor sit amet</li>
<li>19 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
<li>20 Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div id="footer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
</div>
CSS
#header {
font: 16px Arial;
color: white;
background-color: black;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#main {
overflow-y:auto;
}
#footer {
color: white;
background-color: black;
font: 16px Arial;
color: white;
/*position: fixed;*/
bottom: 0;
left: 0;
right: 0;
}