JSFiddle - React, Tailwind, and code Playground

HTML

<button id="changeHeight">Change Height</button>
<footer>
</footer>

CSS

html, body { height:110%; }
footer { height:10%; background:red; width:100%; bottom:0px; }

JavaScript

moveFooter();
$(window).resize(function() {
    moveFooter();
});

function moveFooter() {
    var dH = $(document).height();
    var wH = $(window).height();
    
    if (dH < wH)
        $('footer').css("position", "relative");
    else
        $('footer').css("position", "absolute");
}

$('#changeHeight').click(function(e) {
    $('html, body').height("50%");
});