Бутстрап - Заполните контейнер для жидкости между верхним и нижним колонтитулом

Question

Это может быть очень простой вопрос, но я некоторое время не встречаюсь с сценкой CSS, и я не могу понять, как это понять. Я использую структуру Bootstrap, и у меня есть фиксированный верхний и нижний колонтитулы. Контейнер между ними включает навигационную панель и область содержимого. Я хотел бы, чтобы этот контейнер заполнил все пространство (100% высоты) между верхним и нижним колонтитулом.

Вот jsFiddle проекта: http://jsfiddle.net/NyXkt/2/

Это текущий 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> 

Если кто-нибудь может объяснить, что я, возможно, потребуется сделать, или указать мне на пример, я Оцените это.

Answer 1

Любые родительские контейнеры также должны быть 100% высоты (html, body и #wrapper). Если вы делаете #wrapper {height: 100%} и добавляете «fill-height» в свой контейнер, он должен работать. Смотрите здесь:

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

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