JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="wrap">
    <!-- Begin page content -->
    <div class="container">
        <div class="page-header">
             <h1>Sticky footer</h1>

        </div>
        <p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
        <p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
    </div>
    <div id="push"></div>
</div>
<div id="footer">
    <div class="container"></div>
</div>

CSS

#wrap .container {
    background-color: lightgreen;
}
/* Sticky footer styles
      -------------------------------------------------- */
 html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
 #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
 #push, #footer {
    height: 60px;
}
#footer {
    background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
 @media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* Custom page CSS
      -------------------------------------------------- */

/* Not required for template or sticky footer method. */
 .container {
    width: auto;
    max-width: 680px;
}
.container .credit {
    margin: 20px 0;
}