Bootstrap - Fill fluid container between header and footer

This may be a very simple question, but I've been out of the CSS scene for awhile and I can't seem to figure it out. I am using the Bootstrap framework and I have a fixed header and footer. The container in between includes a navbar and content area. I would like that container to fill the entire space (100% height) in between the header and footer.

Here is jsFiddle of the project: http://jsfiddle.net/NyXkt/2/

This is the current html structure:

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

If anyone could explain what I may need to do, or point me to an example, I'd appreciate it.