使表填满整个窗口

时间:2012-05-17 05:31:26

标签: html css internet-explorer stylesheet

如何让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 来展示此页面。

6 个答案:

答案 0 :(得分:18)

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

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

答案 1 :(得分:9)

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

答案 2 :(得分:1)

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

答案 3 :(得分: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

答案 4 :(得分:0)

这对我来说很好用:

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

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

答案 5 :(得分:0)

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