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/

上看到解决方案

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>

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

Answer 3

下面一行帮助我解决了表格滚动条的问题;问题是页面中的2个滚动条很尴尬。应用于表格时，下面的样式对我来说很好。
<table Style="position: absolute; height: 100%; width: 100%";/>

Answer 4

尝试使用

<html style="height: 100%;">
    <body style="height: 100%;">
        <table style="height: 100%;">
        ...

为了强制table元素的所有父级扩展可用的垂直空间（这将消除使用absolute定位的需要）。

适用于Firefox 28，IE 11和Chromium 34（因此也可能适用于Google Chrome）

来源： http://www.dailycoding.com/posts/howtoset100tableheightinhtml.aspx

Answer 5

这对我来说很好用：

<style type="text/css">
#table {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}
</style>

对我来说，只是将高度和宽度更改为100％并不适合我，也不会将左，右，上和下设置为0，但将它们放在一起都可以解决问题。

Answer 6

这是因为，当然，没有ACTUAL页面高度。请记住，您在页面内容中垂直而非水平滚动，创建有限宽度但无限高度。所选答案的作用是让桌子占据可见区域并留在那里，无论什么（绝对定位）。从理论上讲，你试图做的事情是不可能的

使表填满整个窗口

6 个答案: