如何设置表格中单元格的高度，该表格会展开以填充 IE 中的窗口？答案

【问题标题】：How do you set the heights of cells in a table that expands to fill the window in IE?如何设置表格中单元格的高度，该表格会展开以填充 IE 中的窗口？
【发布时间】：2010-10-18 08:57:33
【问题描述】：

我正在尝试构建一个简单的单列布局。我希望前两行具有较小的固定高度。第三行应展开以填充页面的其余部分。这是我目前的来源：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style type="text/css">
        html, body
        {
            height:100%;
            width:100%;
            border:0px;
            margin:0px;
        }
    </style>
</head>
<body>
    <table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height:50px;background:red;">Header 1</td>
    </tr>
    <tr>
        <td style="height:10px;background:blue;">Header 2</td>
    </tr>
    <tr>
        <td style="background:green;">Content</td>
    </tr>
    </table>
</body>
</html>

这在 Safari、Firefox 和 Opera 中运行良好。但是，它在 IE6 和 IE7 中都失败了。在这两个浏览器中，前两行的渲染比它们指定的高度大得多。不仅如此，它们实际上还会随着浏览器窗口的高度动态调整大小。这就像 IE 正在将恒定的像素高度转换为百分比高度。

对我来说重要的是浏览器窗口不显示滚动条，除非第三行的内容大到需要它。将第三个

的高度设置为 100% 将导致这些滚动条始终出现，因为该行的高度实际上将设置为等于整个表格的高度（它将是其包含元素的 100%）。

删除 doctype 声明并恢复为 quirks 模式似乎使问题在 IE 中消失了，但我需要使用 HTML 4.01 过渡，因为这是该应用程序中所有其他现有页面所期望的。

【问题讨论】：

出于好奇，您需要 100% 高度布局的原因是什么？

标签： html css internet-explorer html-table

【解决方案1】：

Here is an article 告诉你如何做到这一点。我刚刚测试了他们在 IE 6 中提供的示例，它可以工作。

看来您必须使用表格的高度属性，而不是通过样式属性。

【讨论】：

这与我的布局略有不同。我能够很好地扩展整个表格。但是向表中添加行并尝试仅扩展最后一行是我遇到问题的地方。

【解决方案2】：

如何将 position:fixed 添加到表格中？我在 IE8 中测试过，似乎可以工作。

【讨论】：

这在 IE7 中似乎没有任何区别。

【解决方案3】：

如果您使用它来布局页面，为什么不使用div 来代替？

这类作品：

<style>
    .outer {
        position:relative;
        height: 100%;
        width: 500px;
        background-color: blue;
    }
    .top {
        height: 30px;
        background-color: red;
        width: 100%
    }
    .middle {
        height:30px;
        background-color: green;
        width: 100%
    }
</style>
<div class="outer">
    <div class="top">
        content1
    </div>
    <div class="middle">
        content2
    </div>
    content3
</div>

【讨论】：

【解决方案4】：

将你最后一个td的高度设置为100%：

    <tr>
        <td style="background:green;height:100%;">Content</td>
    </tr>

【讨论】：

那行不通。将 td 设置为 100% 的高度会导致该单元格与定义它的表格具有相同的高度。因此，由于 table 本身是 body 的 100%，td 也将是 body 的 100%，从而导致窗口滚动。
想想吧。如果最后一个单元格的高度与表格相同，会发生什么？那么表格将如何显示前两个单元格？不会有他们的空间。你试过我的解决方案吗？它有效。
是的，我已经尝试过您的解决方案。事实上，我的问题明确指出此解决方案在 IE6 或 IE7 中不起作用。

【解决方案5】：

这行得通吗：？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <style type="text/css">
        html, body
        {
            height:100%;
            width:100%;
            border:0px;
            margin:0px;
        }
    </style>
</head>
<body>
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td height="50" style="background:red;">Header 1</td>
    </tr>
    <tr>
        <td height="10" style="background:blue;">Header 2</td>
    </tr>
    <tr>
        <td style="background:green;">Content</td>
    </tr>
    </table>
</body>
</html>

【讨论】：