html - 让表格填满整个窗口

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

您可以使用这样的位置在父容器中拉伸(stretch)元素。

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