<p>I'm using a table to design the layout of my web page. I want the table to fill the page even if it doesn't contain much content. Here's the CSS I'm using:</p>

<pre class="lang-css prettyprint-override"><code>html, body {
    height: 100%;
    margin: 0;
    padding: 0; 
}

#container {
    min-height: 100%;
    width: 100%; 
}
</code></pre>

<p>And I place something like this in the page code:</p>

<pre><code>&lt;table id="container"&gt;
&lt;tr&gt;
&lt;td&gt;
...
</code></pre>

<p>This works for Opera 9, but not for Firefox 2 or Internet Explorer 7. Is there a simple way to make this solution work for all popular browsers?</p>

<p>(Adding <code>id="container"</code> to <code>td</code> doesn't help.)</p>

Just use the
```
height
```
property instead of the
```
min-height
```
property when setting
```
#container
```
. Once the data gets too big, the table will automatically grow.