JSFiddle - React, Tailwind, and code Playground

by drublic

HTML

<!DOCTYPE html>
<html lang="en">  
<head>
    
</head>  
<body>
<header class="navbar navbar-fixed">
    header
</header>

<div class="content">
<div class="container">
    <div class="row">
        <div class="span4">
            <h2>Headline!</h2>
            <p>Aesthetic irony fanny pack synth, VHS thundercats PBR blog skateboard high life put a bird on it 3 wolf moon terry richardson trust fund. Tumblr bicycle rights ethical seitan messenger bag.</p>
            <p>Before they sold out food truck wayfarers dreamcatcher. Yr fanny pack Austin portland skateboard, craft beer butcher high life mixtape terry richardson wolf farm-to-table viral brunch.</p>
        </div>
        <div class="span4">
            <h2>Headline!</h2>
            <p>Fixie pitchfork dreamcatcher mixtape. Helvetica sartorial before they sold out stumptown brunch fanny pack artisan, salvia food truck tumblr marfa squid. Before they sold out food truck wayfarers dreamcatcher.</p>
            <p>Aesthetic irony fanny pack synth, VHS thundercats PBR blog skateboard high life put a bird on it 3 wolf moon terry richardson trust fund. Tumblr bicycle rights ethical seitan messenger bag.</p>
            <p>Aesthetic irony fanny pack synth, VHS thundercats PBR blog skateboard high life put a bird on it 3 wolf moon terry richardson trust fund. Tumblr bicycle rights ethical seitan messenger bag.</p>
        </div>
        <div class="span4">
            <h2>Headline!</h2>
            <p>Before they sold out food truck wayfarers dreamcatcher. Yr fanny pack Austin portland skateboard, craft beer butcher high life mixtape terry richardson wolf farm-to-table viral brunch.</p>
            <p>Before they sold out food truck wayfarers dreamcatcher. Yr fanny pack Austin portland skateboard, craft beer butcher high life mixtape terry richardson wolf farm-to-table viral brunch.</p>
        </div>

    </div>
</div>
  </div>
  <footer>
    <p>Foooooooooooooooooooooooooooooooooooooooter</p>
 ...

CSS

body {
    padding-top: 40px;
    background-color: #FCFCFC;
}

header, footer {
    background-color: #EEEEEE;
}

.content {
  margin-bottom: -30px;
  min-height: 100%;
  position: relative;
}

.content:before, .content:after { content: ''; display: table; }
.content:after { clear: both; }

footer {
    width: 100%;
}

.sticky {
    position: fixed;
    bottom: 0;
}


footer p {
    border-top: 1px solid #DDDDDD;
    margin: 18px 20px 10px 20px;
    padding: 5px 10px;    
}

footer p, footer a {
    font-size: 12px;
    color: #BBBBBB;
}

/*============================= BT 2.0 =============================*/
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
q:before,q:after,blockquote:before,blockquote:after{content:"";}
html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
a:focus{outline:thin...

JavaScript

+ function(window, doc, $, undefined) {
    if ($('.content').height() < doc.height) {
        $('footer').addClass('sticky');
    }
    
} (window, document, jQuery);