如何将 HTML 表格拉伸到浏览器窗口高度的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/90049/
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
How to stretch an HTML table to 100% of the browser window height?
提问by Mikhail
I'm using a table to design the layout of my web page. I want the table to fill the page even if it doesn't contain much content. Here's the CSS I'm using:
我正在使用表格来设计我的网页布局。我希望表格填满页面，即使它不包含太多内容。这是我正在使用的 CSS：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
width: 100%;
}
And I place something like this in the page code:
我在页面代码中放置了这样的东西：
<table id="container">
<tr>
<td>
...
This works for Opera 9, but not for Firefox 2 or Internet Explorer 7. Is there a simple way to make this solution work for all popular browsers?
这适用于 Opera 9，但不适用于 Firefox 2 或 Internet Explorer 7。是否有一种简单的方法可以使此解决方案适用于所有流行的浏览器？
(Adding id="container"to tddoesn't help.)
（添加id="container"到td没有帮助。）
采纳答案by Vincent McNabb
Just use the heightproperty instead of the min-heightproperty when setting #container. Once the data gets too big, the table will automatically grow.
设置时只需使用height属性而不是min-height属性#container。一旦数据变得太大，表会自动增长。
回答by deathlock
Try using this:
尝试使用这个：
html, body {
height: 100%;
}
So besides making the table's height to 100%, you also should have to make sure that the html'd and body's height are also 100%, so it will stretch properly.
所以除了将表格的高度设置为 100% 之外，您还应该确保 html'd 和正文的高度也是 100%，这样它才能正确拉伸。
回答by Priyanga
You can handle this in Javascript/JQuery.
您可以在 Javascript/JQuery 中处理此问题。
window_height = $(window).height();
$('#container').css('min-height', window_height);
