title: how to make full height cell in full height table in Internet Explorer
body: <p>I have next html code</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style type="text/css"&gt;
      html {height:100%;}body {height:100%;margin:0;}
      h1 {form-size:20px;margin:0;padding:20px;}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table style="width:100%;height:100%"&gt;
     &lt;tr&gt;
       &lt;td&gt;
         &lt;div style="background-color:#f00;"&gt;
           &lt;h1&gt;This text should make height of this cell&lt;/h1&gt;
         &lt;/div&gt;
       &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr style="height:100%;" id="row"&gt;
       &lt;td style="background-color:#c0c;"&gt;
         &lt;div style="height:100%;width:100%;background-color:#00f;color:#fff;"&gt;
           This cell should take all unused space of table
         &lt;/div&gt;
       &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;
         &lt;div style="background-color:#0f0;"&gt;
          &lt;h1&gt;This text should make height of&lt;br&gt; this cell&lt;/h1&gt;
         &lt;/div&gt;
       &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It works perfect in all browsers - except IE, where blue div inside middle cell takes space only for text.
  May be someone know how to stretch it to whole free space inside table?</p>
  
  <p>UPDATE: I Know that tables are bad in page-layout. if you can show me example of div layout which have top and bottom block with variable height and middle part which use all free space of browser window I will use it. I promise =)</p>