title: Expand div vertically to available space
body: <p>I have a simple page with 3 div on top of each other but I cannot get the middle content div to use all the vertical space available on screen. Note that top and bottom height cannot be fixed and that it has to be compatible with IE9.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div&gt;Top&lt;/div&gt;
      &lt;div class="content"&gt;Middle&lt;/div&gt;
      &lt;div&gt;Bottom&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
      background-color: #dddddd;
  }
  .content {
      height: 100%;
      min-height: 100%;
  }
  </code></pre>
  
  <p>I also put that on Fiddle to demonstrate the issue: <a href="http://jsfiddle.net/quaxkq40/" rel="nofollow">http://jsfiddle.net/quaxkq40/</a></p>
  
  <p>Thanks.</p>