gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:03:48 29 4
gpt4 key购买 nike

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

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

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com