20

如何使 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来展示这个页面。

4

6 回答 6

26

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

<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>
于 2012-05-17T05:35:18.883 回答
12

您可以在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只是为了确保表格被扩展。你可以删除它。

于 2012-05-17T05:43:21.303 回答
2

这对我来说很好：

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

对我来说，仅将高度和宽度更改为 100% 对我来说并不能做到这一点，将左、右、上和下设置为 0 也不行，但是将它们一起使用就可以了。

于 2015-06-25T20:44:57.030 回答
1

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

于 2016-03-11T10:11:53.033 回答
0

尝试使用

<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

于 2015-02-10T15:44:04.963 回答
0

那是因为，当然，没有实际的页面高度。请记住，您垂直滚动页面的内容而不是水平滚动，从而创建有限的宽度但无限的高度。选择的答案所做的是让桌子占据可见区域并无论如何都呆在那里（绝对定位）。所以理论上你想要做的事情是不可能的

于 2016-04-09T19:45:57.660 回答