Bootstrap - Üstbilgi ve altbilgi arasındaki sıvı kapağını doldurun

Question

Bu çok basit bir soru olabilir, ancak bir süredir CSS sahnesinden çıktım ve bunu anlayamıyorum. Bootstrap çerçevesini kullanıyorum ve sabit bir üstbilgi ve altbilgiye sahibim. Aradaki konteyner bir navbar ve içerik alanı içerir. Bu kapsayıcının, üstbilgi ve altbilgi arasındaki boşluğu (% 100 yükseklik) doldurmasını istiyorum. İşte

projesinin jsFiddle geçerli: http://jsfiddle.net/NyXkt/2/

Bu akım html yapısı şöyledir:

<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> 

kimse ben', yapmanız gereken, ya bir örnek beni işaret edebilir açıklamak olsaydı Bunu takdir ediyorum.

Answer 1

Herhangi bir ana kapsayıcı da% 100 yükseklik (html, body ve #wrapper) olmalıdır. Eğer #wrapper {height: 100%} yaparsanız ve kapınıza 'fill-height' eklerseniz çalışmalıdır. Buraya bakın:

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

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