title: How to fit all available height inside element
body: <p>Here's an <a href="http://jsfiddle.net/haGWe/3/" rel="nofollow noreferrer">example on JSFiddle</a>.
  Excerpt of code:</p>
  
  <pre><code>&lt;table style="height:100%"&gt;
      &lt;tr height="20"&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;This gray cell fits all available height of table&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr height="20"&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>There is a table with three rows. Row in the middle fits all available height of table.
  I took this solution from <a href="https://stackoverflow.com/questions/1118566/fit-td-height-to-page">here</a>.</p>
  
  <p>Problem is that impossible to make overflow-y for middle cell. It seems that the middle cell has a min-height property equals height of it's content.
  So does it possible to turn on scrolling (overflow-y:auto) somehow and if it doesn't how to implement this layout in divs?</p>
  
  <p>UPD. Thanks. Seems like this is working example: <a href="http://jsfiddle.net/haGWe/6/" rel="nofollow noreferrer">http://jsfiddle.net/haGWe/6/</a>
  But it's still interesting how to implement this with divs.</p>