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

Posted 2023-03-17

【中文标题】如何将 HTML 表格拉伸到浏览器窗口高度的 100%？

【英文标题】：How to stretch an HTML table to 100% of the browser window height?

【发布时间】：2010-09-10 13:00:58

【问题描述】：

我正在使用表格来设计网页的布局。我希望表格填满页面，即使它不包含太多内容。这是我正在使用的 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 没有帮助。）

【参考方案1】：

试试这个：

html, body    
  height: 100%;

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

【参考方案2】：

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

【参考方案3】：

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

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