JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <header>header text</header>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ligula justo, et varius mauris. Vivamus eleifend feugiat tortor ut egestas. Donec risus diam, vestibulum ut pharetra vitae, scelerisque quis tellus. Fusce pharetra, diam ut facilisis scelerisque, magna nisl viverra lectus, vel malesuada erat odio nec quam. Sed placerat tellus et turpis rhoncus semper. Sed at molestie turpis. Duis purus dui, ornare ut tristique nec, aliquet et purus. Mauris ullamcorper accumsan elit, vel semper justo accumsan non. Aliquam viverra metus nibh. Maecenas tempus, sapien eu semper pellentesque, lacus nisi venenatis purus, id pretium justo ipsum ac lorem.</p>
        <p>Donec auctor enim eu ligula congue quis rutrum ipsum dictum. Phasellus hendrerit, libero ultrices tristique vulputate, urna nunc blandit urna, vel vulputate urna nibh sit amet massa. Mauris erat nisl, rutrum vel rutrum et, feugiat eget diam. Morbi facilisis magna a sem consequat mattis. Sed et ante dolor, nec vulputate nibh. Sed tristique convallis purus quis fringilla. Aenean nec justo vitae dui elementum egestas sit amet et lorem. Praesent hendrerit adipiscing lectus. Nullam varius vulputate arcu, sed iaculis est accumsan sit amet. Vestibulum fringilla, est eget feugiat pretium, elit odio rhoncus mauris, non lacinia velit mi eu turpis. Quisque velit neque, ultrices at adipiscing a, porttitor ut tortor. Integer commodo sapien quam. Duis convallis, arcu adipiscing lacinia pharetra, nisi velit accumsan sapien, quis fermentum ante sapien et orci.</p>
        <p>Donec elit odio, tincidunt id pulvinar et, rutrum a est. In non nunc lectus. Proin adipiscing auctor condimentum. Nulla metus sem, faucibus id aliquet et, faucibus nec nibh. Morbi erat leo, ultricies sit amet venenatis vitae, pretium semper sapien. Aliquam convallis ipsum nec lacus iaculis eu tincidunt dui ultricies. Pellentesque dictum molestie ullamcorper....

CSS

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

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#content {min-height:100%; background-color:green}
header {margin-top:-50px; height:50px; background-color:red;}
footer {margin-bottom:-50px; height:50px; background-color:red;}
p {margin:0; padding:0 0 1em 0;} /* had to take the margin off the p as in some browsers this can add extra margin to #content div*/