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

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

html-table internet-explorer css html

Sebastian Celis · 技术社区 · 17 年前

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

Mitchel Sellers 17 年前

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

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

Kevin Laity 17 年前

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

knut 17 年前

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

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

Dr Casper Black 16 年前

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

Matheus Avellar Will Jenkins 9 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前