html - 在 IE 中如何设置表格中的单元格高度以填充窗口？

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

<!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 正在将恒定像素高度转换为百分比高度。

对我来说重要的是浏览器窗口不显示滚动条，除非第三行的内容大到需要它。将第 3 个的高度设置为 100% 将导致这些滚动条始终出现，因为该行的高度实际上将设置为等于整个表格的高度(它将是其包含元素的 100%)。

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

最佳答案

Here is an article对你来说，告诉你如何做到这一点。我刚刚测试了他们在 IE 6 中提供的示例并且它有效。

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

关于html - 在 IE 中如何设置表格中的单元格高度以填充窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/730950/

html - 在 IE 中如何设置表格中的单元格高度以填充窗口？

上一篇：css - 仅限 SIFR'ing <LI> parent

下一篇：HTML 布局问题