Mikhail Mikhail - 2 months ago 7
CSS Question

How to stretch an HTML table to 100% of the browser window height?

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:

html, body {
height: 100%;
margin: 0;
padding: 0;
}

#container {
min-height: 100%;
width: 100%;
}


And I place something like this in the page code:

<table id="container">
<tr>
<td>
...


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?

(Adding
id="container"
to
td
doesn't help.)

Answer

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.

Comments