JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">this is main</div>
<div id="footer">this is footer</div>

CSS

#main{min-height:300px;background:red;}
#footer{height:80px;width:100%;background:orange;}
#footer.fix{position:fixed;bottom:0;background:yellow;}

JavaScript

(function(){
    var attachToBottom = function() {
        var oh = window.innerHeight
        var mh = document.getElementById("main").scrollHeight;
        var footer = document.getElementById("footer");
        footer.className = (mh+footer.scrollHeight > oh) ? "" : "fix";
    }
    window.addEventListener('load', attachToBottom , false);
    window.addEventListener('resize', attachToBottom , false);
})()