title: twitter bootstrap container div height
body: <p>I am using twitter bootstrap and I would like a container div to stretch to the bottom of the page, but it doesnt. It is always the size corresponding to the content. How to fix that?</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="main-wrapper"&gt;
          &lt;div class="navbar navbar-fixed-top"&gt;
              &lt;div class="navbar-inner"&gt;
                  &lt;div class="container"&gt;
                      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;div class="nav-collapse"&gt;
                          &lt;ul class="nav"&gt;
                              ....
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  .....           
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="container"&gt; &lt;!-- this is the one I want to stretch to the bottom --&gt;
              &lt;div class="row"&gt;
                  &lt;ui:insert name="body" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="push"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;footer role="contentinfo"&gt;
             footer content
          &lt;/footer&gt;
  
      &lt;/body&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Thanks for any help</p>
  
  <p>Kelly</p>