JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

<div id="wrap">
    <div id="main">
        <p>Try Deleting some blah's</p>
        <p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p>
        <p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p>
        <p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p>
        <p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p>
        <p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p>
        <p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p><p>Blah</p>
    </div>
</div>

<div id="footer">Sticky Footer</div>

CSS

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 50px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -50px; /* negative value of footer height */
    height: 50px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}




































#footer {
    background: #CCC;
    text-align: center;
    line-height: 50px;
}