Make a table fill the entire window

Question

How can I make a HTML table fill the entire browser window horizontally and vertically?

The page is simply a title and a score which should fill the entire window. (I realise the fixed font sizes are a separate issue.)

<table style="width: 100%; height: 100%;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>

When I use the above code, the table width is correct, but the height shrinks to fit the two rows of text.

I'm likely to be forced to use Internet Explorer 8 or 9 to present this page.

Answer 1

You can use position like this to stretch an element across the parent container.

<table style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>

Answer 2

you can see the solution on http://jsfiddle.net/CBQCA/1/

OR

<table style="height:100%;width:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid">
     <tr style="height: 25%;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%;">
        <td>100.00%</td>
    </tr>
</table>​

I removed the font size, to show that columns are expanded. I added border:1px solid just to make sure table is expanded. you can remove it.