JSFiddle - React, Tailwind, and code Playground

by scrimothy

HTML

<div class="content">Hello world</div>
<footer>footer text</footer>

CSS

footer {
    background: #ddd;
    margin: 1em 0 0;
    padding: 1em 0;
    text-align: center;
    width: 100%;
}

JavaScript

var pageHeight = $('body').height(),
  footerHeight = $('footer').height();
if (pageHeight < $(window).height() - footerHeight) {
  $('footer').css({
    'position': 'absolute',
    'bottom': '0'
  });
} else {
  $('footer').css({
    'position': '',
    'bottom': ''
  });
}