Bootstrap - Napełnianie pojemnika na płyn między nagłówkiem a stopką

Question

To może być bardzo proste pytanie, ale od jakiegoś czasu nie znajduję się na scenie CSS i nie mogę tego rozgryźć. Korzystam z frameworka Bootstrap i mam stały nagłówek i stopkę. Kontener pomiędzy zawiera navbar i obszar zawartości. Chciałbym, żeby ten pojemnik wypełnił całą przestrzeń (wysokość 100%) pomiędzy nagłówkiem i stopką.

Oto jsFiddle projektu: http://jsfiddle.net/NyXkt/2/

Jest obecna struktura html:

<div id="wrapper"> 
    <!-- Header --> 
    <div class="container-fluid no-padding header"> 
     <div class="row-fluid fill-height"> 
      <!-- Header Left --> 
      <div class="span2"> 
       <p class="center-text">Left</p> 
      </div> 
      <!-- Header Middle --> 
      <div class="span8"> 
       <p class="center-text">Middle</p> 
      </div> 
      <!-- Header Right --> 
      <div class="span2"> 
       <p class="center-text">Right</p> 
      </div> 
     </div> 
    </div> 
    <!-- Content Wrapper --> 
    <div class="container-fluid no-padding fill"> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <div class="well sidebar-nav-fixed no-padding"> 
        <ul id="nav"> 
         <li><a href="#">Item 1</a> 

          <ul> 
           <li><a href="#">Sub-Item 1 a</a> 
           </li> 
           <li><a href="#">Sub-Item 1 b</a> 
           </li> 
           <li><a href="#">Sub-Item 1 c</a> 
           </li> 
          </ul> 
         </li> 
         <li><a href="#">Item 2</a> 

          <ul> 
           <li><a href="#">Sub-Item 2 a</a> 
           </li> 
           <li><a href="#">Sub-Item 2 b</a> 
           </li> 
          </ul> 
         </li> 
         <li><a href="#">Item 3</a> 

          <ul> 
           <li><a href="#">Sub-Item 3 a</a> 
           </li> 
           <li><a href="#">Sub-Item 3 b</a> 
           </li> 
           <li><a href="#">Sub-Item 3 c</a> 
           </li> 
           <li><a href="#">Sub-Item 3 d</a> 
           </li> 
          </ul> 
         </li> 
         <li><a href="#">Item 4</a> 

          <ul> 
           <li><a href="#">Sub-Item 4 a</a> 
           </li> 
           <li><a href="#">Sub-Item 4 b</a> 
           </li> 
           <li><a href="#">Sub-Item 4 c</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <div class="span10"> 
       <p class="center-text">Content</p> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- Footer --> 
<div id="footer"> 
    <div class="container-fluid"> 
     <p class="center-text">Footer</p> 
    </div> 
</div> 

Jeśli ktoś mógłby wyjaśnić, co może muszę zrobić, albo wskazać mi na przykład, że” doceniam to.

Answer 1

Dowolne pojemniki dla rodziców również muszą mieć wysokość 100% (html, body i #wrapper). Jeśli utworzysz #wrapper {height: 100%} i dodasz "wysokość wypełnienia" do swojego kontenera, to powinno działać. Zobacz tutaj:

http://jsfiddle.net/skelly/NyXkt/4/

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