JSFiddle - React, Tailwind, and code Playground

by Lynda333

HTML

<link rel="stylesheet" href="http://magiccitysprinkler.businesscatalyst.com/css/1140.css">
<link rel="stylesheet" href="http://magiccitysprinkler.businesscatalyst.com/css/styles.css">
<div id="main">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus fringilla cursus. Morbi purus augue, ultricies sed vulputate et, blandit eget arcu. Phasellus elementum imperdiet sollicitudin. Vestibulum malesuada aliquet auctor. In consequat faucibus pellentesque. Proin erat est, malesuada sed euismod in, pharetra sit amet lorem. Nam nec risus ac ligula vulputate aliquam. Nunc imperdiet quam vel libero rutrum non dapibus odio consectetur. Donec in turpis suscipit libero tempus sollicitudin id sollicitudin nisl.</p>      
</div>

<div id="footer">
<div class="container">
<div class="row">
    <div class="twelvecol">
        <p class="copyright-text">&copy; 2012 Lorem Ipsum</p>
    </div>
</div>
</div>
</div>

JavaScript

$(function() {
var viewportheight = $(window).height();
var pageheight = $("#main").height(); 
    
    if (pageheight < viewportheight) {
        $("#footer").css({height: (viewportheight - pageheight)});
    }
});