Bootstrap 3.0 Высота 100% не работает

Question

Я установил все, что мне нужно от 100% до 100% высоты, но боковая панель все еще отказывается добраться до нижней части страницы при использовании Bootstrap 3.0. Я использовал трюк -9999px, но он выбивает раскрывающееся меню, которое у меня есть в навигации над ним, поэтому я не могу использовать это исправление.

То, что я пытался вместо этого:

<div class="row-fluid fill"> 
    <nav class="col-lg-2 fill"> 
     <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-piggy-bank navicon" aria-hidden="true"></span> Animal Care</a><br /> 
     <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-user navicon" aria-hidden="true"></span> Customers</a><br /> 
     <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-gift navicon" aria-hidden="true"></span> Donations</a><br /> 
     <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-calendar navicon" aria-hidden="true"></span> Events</a><br /> 
     <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-screenshot navicon" aria-hidden="true"></span> Marketing</a><br /> 
     <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-briefcase navicon" aria-hidden="true"></span> Staff Mangement</a><br /> 
     <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-globe navicon" aria-hidden="true"></span> Web Maintenance</a><br /> 
     <a class="btn btn-link" href="#"><span class="glyphicon glyphicon-shopping-cart navicon" aria-hidden="true"></span> Products & Stock</a><br /> 
    </nav> 
    <div class="col-lg-10 content fill"> 
     <h1>Dashboard</h1> 
     <ul class="breadcrumb"> 
      <li class="active">Home</li> 
     </ul> 
     <div class="row-fluid"> 
      <div class="col-lg-4 zookeeper excount"> 
      10 
      </div> 
      <div class="col-lg-4 birdofprey excount"> 
      10 
      </div> 
      <div class="col-lg-4 otherex excount"> 
      1 
      </div> 
     </div> 
     <div class="row-fluid"> 
      <div class="col-lg-4 exlabel"> 
      Zoo Keeper Experiences 
      </div> 
      <div class="col-lg-4 exlabel"> 
      Bird of Prey Experiences 
      </div> 
      <div class="col-lg-4 exlabel"> 
      Other Events 
      </div> 
     </div> 
     <div class="row-fluid"> 
      <div class="col-lg-12 dashtoday"> 
      <h2>Today - 17th March 2015</h2> 
       <div role="tabpanel"> 
        <ul class="nav nav-tabs" role="tablist" id="dashTabs"> 
         <li role="presentation" class="active"><a href="#todo" aria-controls="todo" role="tab" data-toggle="tab">To-Do</a></li> 
         <li role="presentation"><a href="#keeperlog" aria-controls="keeperlog" role="tab" data-toggle="tab">Keeper Log</a></li> 
        </ul> 
        <div class="tab-content"> 
         <div role="tabpanel" class="tab-pane fade in active" id="todo"> 
         <ul class="nav nav-pills nav-stacked dashtodo"> 
          <li class="active todoitem"> 
           <a href="#">To-Do Item Outstanding</a> 
          </li> 
          <li class="active todoitem"> 
           <a href="#">To-Do Item Outstanding</a> 
          </li> 
          <li class="disabled"> 
           <a href="#">To-Do Item Complete</a> 
          </li> 
          <li class="active todoitem"> 
           <a href="#">To-Do Item Outstanding</a> 
          </li> 
          <li class="active todoitem"> 
           <a href="#">To-Do Item Outstanding</a> 
          </li> 
          <li class="active todoitem"> 
           <a href="#">To-Do Item Outstanding</a> 
          </li> 
         </ul> 
         </div> 
         <div role="tabpanel" class="tab-pane fade" id="keeperlog"> 
         <ul class="nav nav-pills nav-stacked dashtodo"> 
          <li class="active todoitem"> 
           <a href="#">To-Do Item Outstanding</a> 
          </li> 
          <li class="disabled"> 
           <a href="#">To-Do Item Complete</a> 
          </li> 
          <li class="disabled"> 
           <a href="#">To-Do Item Complete</a> 
          </li> 
         </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 

И CSS Я добавил к Boostrap для высоты:

html, body { 
    height: 100%; 
} 

.fill { 
    min-height: 100%; 
    height: 100%; 
} 

Answer 1

Преступник был формой тег, который был вставлен автоматически ASP.Net для визуализации элементов управления. Простое исправление было изменить CSS на:

html, body, form { 
    height: 100%; 
} 

.fill { 
    min-height: 100%; 
    height: 100%; 
} 

высота теперь работает, как ожидалось