使表填满整个窗口

Question

如何使HTML表格水平和垂直填充整个浏览器窗口？

该页面只是一个标题和一个应该填满整个窗口的分数.(我意识到固定的字体大小是一个单独的问题.)

<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>

当我使用上面的代码时,表格宽度是正确的,但高度会缩小以适合两行文本.

我很可能被迫使用Internet Explorer 8或9来呈现此页面.

Answer 1

您可以使用这样的位置来拉伸父容器中的元素.

<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

你可以在http://jsfiddle.net/CBQCA/1/上看到解决方案

要么

<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>?

我删除了字体大小,以显示列已展开.我添加border:1px solid只是为了确保表扩展.你可以删除它.