JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">header</div>        
<div id="body">
    <p class="toggle">expand/collapse
    <p class="hide bigblock">big block
</div>
<div id="footer">footer</div>

CSS

body { margin: 0; }
.hide { display: none; }
.toggle { cursor: pointer; }
.bigblock { background: pink; height: 2000px; }

JavaScript

positionFooter(); 
function positionFooter() {
    if($(document.body).height() < $(window).height()){
        $('#footer').css({
            position: 'absolute',
            top:  ( $(window).scrollTop() + $(window).height()
                  - $("#footer").height() ) + "px",
            width: "100%"
        });
    } else {
        $('#footer').css({
            position: 'static'
        });
    }    
}
$(window).bind('scroll resize click', positionFooter);

$('p.toggle').click(function() {
    $(this).next().toggle();
    
});