title: How to make div match the height of the containing td?
body: <p>I have three "panels" laid out along the row of a table. One is taller than the other two and I want all three panels to match the height of the tallest one. I tried styling the divs with height: 100%, but the the short panels stay short, even as the containing tds grow. </p>
  
  <p>My HTML is generated by JSF, so I have limited control over its form, but I can modify the styles. I made a simplified version of the generated code below. The same problem occurs on IE8 and Firefox. However, IE8 renders the short panels vertically aligned to the top of the td, while Firefox renders them in the middle.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test Table&lt;/title&gt;
      &lt;style TYPE="text/css"&gt;
          td {border: 1px solid red; padding: 1px;}
          .panel {border: 1px solid blue; padding: 1px;height:100%}
          .panel-header{background-color: green; color: white;}
          .panel-body {border: 1px solid green; padding: 1px; height:100%;}
      &lt;/style&gt; 
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Test Table&lt;/h1&gt;
      &lt;table width="100%"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div class="panel" style="height:200px;"&gt;
                      &lt;div class="panel-header"&gt;
                      Header One
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                      Body One
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="panel" style="height:100%;"&gt;
                      &lt;div class="panel-header"&gt;
                      Header Two
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                      Body Two
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="panel"&gt;
                      &lt;div class="panel-header"&gt;
                      Header Three
                      &lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                      Body Three
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>