Html 使表格填满整个窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10630311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a table fill the entire window
提问by Hand-E-Food
How can I make a HTML table fill the entire browser window horizontally and vertically?
如何使 HTML 表格水平和垂直填充整个浏览器窗口？
The page is simply a title and a score which should fill the entire window. (I realise the fixed font sizes are a separate issue.)
该页面只是一个标题和一个应填满整个窗口的分数。（我意识到固定字体大小是一个单独的问题。）
<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>
When I use the above code, the table width is correct, but the height shrinks to fit the two rows of text.
当我使用上面的代码时，表格宽度是正确的，但高度缩小以适应两行文本。
I'm likely to be forced to use Internet Explorer 8or 9to present this page.
我很可能被迫使用Internet Explorer 8或9来显示此页面。
回答by Todd Baur
You can use position like this to stretch an element across the parent container.
您可以使用这样的位置在父容器上拉伸元素。
<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>
回答by Raab
you can see the solution on http://jsfiddle.net/CBQCA/1/
您可以在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>?
I removed the font size, to show that columns are expanded.
I added border:1px solidjust to make sure table is expanded. you can remove it.
我删除了字体大小，以显示列已展开。我添加border:1px solid只是为了确保表被扩展。你可以删除它。
回答by ColorCodin
This works fine for me:
这对我来说很好用：
<style type="text/css">
#table {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
</style>For me, just changing Height and Width to 100% doesn't do it for me, and neither do setting left, right, top and bottom to 0, but using them both together will do the trick.
对我来说，仅将 Height 和 Width 更改为 100% 对我来说不起作用，将 left、right、top 和 bottom 设置为 0 也不行，但是将它们一起使用可以解决问题。
回答by Vishwas S L
Below line helped me to fix the issue of scroll bar for a table; the issue was awkward 2 scroll bars in a page. Below style when applied to table worked fine for me.<table Style="position: absolute; height: 100%; width: 100%";/>
下面这行帮助我解决了表格滚动条的问题；问题是页面中的 2 个滚动条很尴尬。应用于表的以下样式对我来说效果很好。<table Style="position: absolute; height: 100%; width: 100%";/>
回答by DanjahSoft Programmer
That is because, of course, there is no ACTUAL page height. Keep in mind that you scroll throughout the contents of a page vertically not horizontally, creating a limited width but unlimited height. What the selected answer did was to make the table take up the visible area and stay there no matter what(absolute positioning).So theoretically what you were trying to do was impossible
那是因为，当然，没有实际页面高度。请记住，您垂直而不是水平滚动整个页面的内容，从而创建有限的宽度但无限的高度。选择的答案所做的是让桌子占据可见区域并无论如何都留在那里（绝对定位）。所以理论上你试图做的事情是不可能的
回答by Janaka Bandara
Try using
尝试使用
<html style="height: 100%;">
<body style="height: 100%;">
<table style="height: 100%;">
...
in order to force all parents of the tableelement to expand over the available vertical space (which will eliminate the need to use absolutepositioning).
为了强制table元素的所有父元素扩展到可用的垂直空间（这将消除使用absolute定位的需要）。
Works in Firefox 28, IE 11 and Chromium 34 (and hence probably Google Chrome as well)
适用于 Firefox 28、IE 11 和 Chromium 34（因此也可能适用于 Google Chrome）
Source: http://www.dailycoding.com/posts/howtoset100tableheightinhtml.aspx
来源：http: //www.dailycoding.com/posts/howtoset100tableheightinhtml.aspx
