title: Bootstrap - Fill fluid container between header and footer
body: <p>This may be a very simple question, but I've been out of the CSS scene for awhile and I can't seem to figure it out. I am using the Bootstrap framework and I have a fixed header and footer. The container in between includes a navbar and content area. I would like that container to fill the entire space (100% height) in between the header and footer.</p>
  
  <p>Here is jsFiddle of the project: <a href="http://jsfiddle.net/NyXkt/2/" rel="noreferrer">http://jsfiddle.net/NyXkt/2/</a></p>
  
  <p>This is the current html structure:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;!-- Header --&gt;
      &lt;div class="container-fluid no-padding header"&gt;
          &lt;div class="row-fluid fill-height"&gt;
              &lt;!-- Header Left --&gt;
              &lt;div class="span2"&gt;
                  &lt;p class="center-text"&gt;Left&lt;/p&gt;
              &lt;/div&gt;
              &lt;!-- Header Middle --&gt;
              &lt;div class="span8"&gt;
                  &lt;p class="center-text"&gt;Middle&lt;/p&gt;
              &lt;/div&gt;
              &lt;!-- Header Right --&gt;
              &lt;div class="span2"&gt;
                  &lt;p class="center-text"&gt;Right&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Content Wrapper --&gt;
      &lt;div class="container-fluid no-padding fill"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span2"&gt;
                  &lt;div class="well sidebar-nav-fixed no-padding"&gt;
                      &lt;ul id="nav"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 1 a&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 1 b&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 1 c&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 2 a&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 2 b&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 3 a&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 3 b&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 3 c&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 3 d&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 4 a&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 4 b&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 4 c&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="span10"&gt;
                  &lt;p class="center-text"&gt;Content&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Footer --&gt;
  &lt;div id="footer"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;p class="center-text"&gt;Footer&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If anyone could explain what I may need to do, or point me to an example, I'd appreciate it.</p>