JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<br/>
<input type="button" id="clickme" value="click me">
<br/>
    <div id="dummy"></div>
<div id="footer">foo</div>

CSS

#footer{
    background-color:black;
    height:30px;
    width:100%;
}
#dummy{
    background-color:red;
}

JavaScript

$("#clickme").on("click",function(){
    $("#dummy").animate({
            height: 500
        }, 1500);
});

$(window).bind("load resize", function () {
        positionFooter();
    });
    
    function positionFooter() {
        
        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
        if (docHeight < $(window).height()) {
            var diff = $(window).height() - docHeight;
            if (!$("#sticky-footer-push").length > 0) {
                $("#footer").before('<div id="sticky-footer-push"></div>');
            }
            $("#sticky-footer-push").height(diff);
    
        }
        //fix centercol height
        $("#centercol").height($("#footer").position().top - $("#header").height() * 2);
    }
    positionFooter();