title: How can I scale a div to 100% height and width inside of another element
body: <p>How can I scale a div to 100% height and width inside of another element? In my case a sourrounding td. Since I'm a plugin I can not control the other HTML on the page. Here is my HTML:</p>
  
  <pre><code>&lt;body style="height:100%;"&gt;
    &lt;table width="600px" height="400px" border="1"&gt;
      &lt;tr&gt;
        &lt;td style="background-color:silver;"&gt;Cell 1&lt;/td&gt;
  
        &lt;td style="background-color:silver;"&gt;
      &lt;div style="height:100%; background-color:yellow;"&gt;
        &lt;div style="min-height:100%; height:100%; background-color:red;"&gt;
          Cell 2
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>So, the Cell 2 div should be maximized. Is there a cross browser way to do this? Why is this so complicated?</p>