Bootstrap 3.0 Height 100% not working - html

Question

I've set everything I need 100% to to 100% height but the sidebar still refuses to got to the bottom of the page when using Bootstrap 3.0. I've used the -9999px trick but that knocks out the dropdown I have in the navigation above it so I can't use that fix.
What I've tried instead is:
<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">To-Do</li>
<li role="presentation">Keeper Log</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">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="disabled">
To-Do Item Complete
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="keeperlog">
<ul class="nav nav-pills nav-stacked dashtodo">
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="disabled">
To-Do Item Complete
</li>
<li class="disabled">
To-Do Item Complete
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS I've added to Boostrap for the height is:
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}

Answer 1

The culprit was a form tag that has been inserted automatically by ASP.Net to render the controls. The simple fix was to change the CSS to:
html, body, form {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
The height now works as expected