html - 如何将 HTML 表格拉伸到浏览器窗口高度的 100%？

Question

我正在使用表格来设计网页的布局。我希望表格填满页面，即使它不包含太多内容。这是我正在使用的 CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0; 
}

#container {
    min-height: 100%;
    width: 100%; 
}

我在页面代码中放置了这样的东西：

<table id="container">
<tr>
<td>
...

这适用于 Opera 9，但不适用于 Firefox 2 或 Internet Explorer 7。有没有一种简单的方法可以使该解决方案适用于所有流行的浏览器？

（添加id="container"到td没有帮助。）

score 20 · Accepted Answer

尝试使用这个：

html, body    {
  height: 100%;
}

所以除了将表格的高度设置为 100% 之外，您还应该确保 html'd 和 body 的高度也是 100%，这样它才能正确拉伸。

score 8 · Accepted Answer

设置时只需使用height属性而不是min-height属性#container。一旦数据变得太大，表就会自动增长。

score 0 · Accepted Answer

您可以在 Javascript/JQuery 中处理此问题。

window_height = $(window).height();
$('#container').css('min-height', window_height);

3 回答 3