JSFiddle - React, Tailwind, and code Playground

by scrimothy

HTML

<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices faucibus lorem, eu sagittis urna tempus et. Nunc quis ultricies ante. Donec et tortor odio. Nulla facilisi. In ut justo sed enim consequat euismod. Fusce ac arcu felis. In luctus, sem bibendum sodales egestas, turpis risus bibendum nisl, a vulputate ipsum sapien in purus. Cras id enim augue.

Suspendisse eleifend volutpat interdum. Sed consequat egestas accumsan. Vestibulum mi diam, dapibus ut sollicitudin non, tristique sit amet erat. Praesent laoreet enim gravida ante interdum tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pulvinar ligula nisl. Vestibulum lacinia sem eu eros fringilla sed euismod sapien vehicula.

Praesent porta aliquam lacus nec scelerisque. Proin metus tortor, vestibulum sed rhoncus nec, consequat a metus. Mauris pellentesque laoreet justo eu accumsan. Aenean nec odio orci. Nullam venenatis volutpat venenatis. Sed ornare nisi id diam fermentum aliquam. Nunc quam magna, condimentum id hendrerit ut, tempor vitae purus. In vitae mauris ligula, in interdum felis. Suspendisse sapien sapien, pellentesque nec faucibus volutpat, consectetur non lectus. Pellentesque molestie, purus sed ultricies fermentum, sapien ipsum viverra mauris, eget suscipit leo felis non nunc. Cras vitae nisi nulla, eget pharetra nibh. Sed facilisis aliquet blandit. Vestibulum lorem diam, accumsan eu porttitor ut, egestas sit amet dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Quisque nulla mi, fringilla in tincidunt quis, imperdiet a est. Donec in felis tempus risus tempor vulputate sed et metus. Mauris eget gravida nibh. Proin ligula orci, tempus sed pellentesque nec, aliquet id enim. In vel dui auctor dolor aliquet tristique. Pellentesque suscipit ornare lorem, sit amet mattis sem gravida sed. Curabitur dictum molestie porta. Fusce quis est eget lorem molestie volutpat a ut...

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': ''
  });
}