JSFiddle - React, Tailwind, and code Playground

by baptme

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
    <div id="main-wrapper">
        <div id="navbar" class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>  <!-- you forgot the closing </a> -->  
                    <div class="nav-collapse">
                        <ul class="nav">
                            ....
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div id="firstcontainer" class="container" >
            <div class="row">
                <span class="span12">
                .....
                </span> <!-- allways include a .span* in a .row -->           
            </div>
        </div>

        <div id="secondcontainer" class="container" style="background-color:#cccccc;"> <!-- this is the one I want to stretch to the bottom -->
            <div class="row">
                <div class="span12">
                    <ui:insert name="body" />
                </div>
            </div>
        </div>

        <div id="push"></div>
        </div>
        <footer role="contentinfo">
           footer content
        </footer>

CSS

footer[role="contentinfo"] {
    color: #666;
    background: black;
    padding: 18px 0;
}

footer[role="contentinfo"] p {
    margin: 0;
}
/* Sticky Footer styles begin */
html,body {
    height: 100%;
}

#push {
    height: 54px;
}

footer[role="contentinfo"] {
    height: 18px; /* accounts for padding */
}

#main-wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px auto -54px;
}

JavaScript

function sizing() {
var wrapperheight=$("#mainwrapper").height();
var navbarheight=$("#navbar").height();
var firstcontainerheight=$("#firstcontainer").height();
var pushheight=$("#push").height();    
var footerheight=$("#footer").height();
var secondcontainerheight=wrapperheight-navbarheight-firstcontainerheight-pushheight-footerheight;
$("#secondcontainer").height(secondcontainerheight+"px");
}
$(document).ready(sizing);
$(window).resize(sizing);