Bootstrap - Riempire il contenitore del fluido tra l'intestazione e il footer

Question

Questa potrebbe essere una domanda molto semplice, ma sono stato fuori dalla scena CSS per un po 'e non riesco a capirlo. Sto usando il framework Bootstrap e ho un'intestazione e un piè di pagina fissi. Il contenitore in mezzo include una barra di navigazione e l'area del contenuto. Mi piacerebbe che il contenitore riempia l'intero spazio (100% di altezza) tra l'intestazione e il piè di pagina.

Ecco jsFiddle del progetto: http://jsfiddle.net/NyXkt/2/

Questa è la struttura HTML corrente:

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

Se qualcuno potrebbe spiegare che cosa potrei aver bisogno di fare, o punto a me un esempio, I' d lo apprezzo

Answer 1

Anche i contenitori genitori devono essere alti al 100% (html, corpo e # wrapper). Se fai # wrapper {height: 100%} e aggiungi "fill-height" al tuo contenitore, dovrebbe funzionare. Vedi qui:

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

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