JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">Header</div>
<div class="body">Body</div>
<div class="footer">Footer</div>

CSS

body{padding:0; margin:0;}
div {
    display:block;
    position:relative;
    padding:20px 0;
    text-align:center;
    width:100%;
}
.header {
    background:green;
    color:#fff;
}
.body {
    margin:10px 0;
    background:blue;
    color:#fff;
}
.footer {
    background:black;
    color:#fff;
}

JavaScript

var dh = $(document).height(),
    fh = $(".footer").outerHeight(),
    bh = $("body").height();

if(bh<dh)
{
    $(".footer").css({
        "position":"fixed",
        "display":"block",
        "top":(dh-fh)+"px"
    });
}