JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
        Test string<br>
    
    <footer>F-F-F-F-F-FOOTER!</footer>
</div>
<div id="below"></div>

CSS

html { height: 100%; }
body { background: yellow; height: 100%; }

#container { position: relative; background: red; min-height: 100%; padding-bottom: 60px; box-sizing: border-box; }
#below { background: blue; height: 500px; }

footer { position: absolute; bottom: 0; height: 60px; width: 100%; background: pink; }