Div take full height in a containing div (background)

I have the following problem.

I am using a twitter bootstrap to make my new website but I have difficulties with the background. The following is what I have :

<body>   
    <div class="wrapper">
        <div class="navbar navbar-inverse navbar-fixed-top">
               ...
        </div>
        <div id="header">
             ...
        </div>
        <div id="content">
             ...
        </div>
        <div class="push>
        </div>
    </div>
    <div class="footer">
         ....
    </div>
</body>

The navbar is fixed at top. (fixed height) The header (title stuff) is scrolling with the page and is fixed height. the footer is at the bottom of the page but scrolls if there is more content (not fixed at bottom but fixed height)

What I want is that the content has a background that takes all the avaiable space (from right after the header till the footer) Image to clarify

Full HTML & CSS(without bootstrap css) code

Solution

So you want the content area to be at least 100% less header and footer so to speak?

This is how i would do it:

demo: http://jsbin.com/ofijap/1/edit

.head {
  height:100px;
  background-color:green;
}
.wrap {
  min-height:100%;
  background-color:red;
}
.footer {
  height:100px;
  background-color:grey;
  margin-top:-100px;
}
.content {
  padding-bottom:100px;
}


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="wrap">
      <div class="head">Head</div>
    <div class="content">content</div>   
    </div>
  <div class="footer">footer</div>
</body>
</html>

EDIT:

as a rule of thumb, if you want something to fill up all the vertical space it probably needs min-height:100%; But, its parent should have 100% height too, and so on up to the body element.