代码之家 › 专栏 › 技术社区 › Sebastian Celis

在IE中,如何设置表格中单元格的高度以填充窗口?

html-table internet-explorer css html

0

Sebastian Celis · 技术社区 · 16 年前

<!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,因为这是此应用程序中所有其他现有页面所期望的。

5 回复 | 直到 9 年前

1

0

Mitchel Sellers 16 年前

Here is an article 告诉你怎么做的。我刚刚测试了IE6中提供的示例,结果成功了。

似乎您必须使用表的height属性,而不是通过样式属性。

2

0

Kevin Laity 16 年前

加个位置:固定在桌子上怎么样?我在IE8中测试过了,看起来很有效。

3

0

knut 16 年前

设定最后一个的高度 td 100% :

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

4

0

Dr Casper Black 15 年前

<!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>

5

0

Matheus Avellar Will Jenkins 8 年前

如果你用这个布局一个页面为什么不使用 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>