title: Styling table to fill remaining space and scroll
body: <p>I have a problem with a css layout.</p>
  <p>I'm trying to do the layout without resorting to javascript to position elements.</p>
  <p>The overall layout is fine, barring the problem with table filling the remaining space</p>
  <pre><code>=============================
  | LT |  TOP            | TR |
  =============================
  |  Variable height section  |
  |                           |
  =============================
  | Title                     |
  |===========================|
  | TABLE to fill remaining   |
  | with scrollable body and  |
  | scrollable table (i.e.    |
  | fixed headers)            |
  =============================
  </code></pre>
  <p>Here is the jsfiddle <a href="http://jsfiddle.net/44cbf4L5/2/" rel="nofollow noreferrer">http://jsfiddle.net/44cbf4L5/2/</a></p>
  <p>Can anyone suggest a way of making the table fill it's parent div.</p>
  <p>thanks in advance.</p>
  <h3>EDIT 1</h3>
  <p>Thanks for comments, this fiddle is closer <a href="http://jsfiddle.net/44cbf4L5/11/" rel="nofollow noreferrer">http://jsfiddle.net/44cbf4L5/11/</a> although the 100% height and width doesn't account for the width of the scroll bars.</p>
  <p>I suppose the next part of the question is how to you size to 100% height or width including height of width of scroll bars?  almost like a box-sizing attrib for scrollbars?</p>