HTML iframe 高度在 Firefox 中无法正常工作（父容器高度为 100%，以及 html 和正文）答案

【问题标题】：HTML iframe height not working correctly in Firefox (parent container height is 100%, as well as html and body)HTML iframe 高度在 Firefox 中无法正常工作（父容器高度为 100%，以及 html 和正文）
【发布时间】：2012-03-04 13:17:45
【问题描述】：

我正在尝试创建一个高度为 100%、宽度为 100% 的 iframe。 html 和 body 都设置为 100% 高度，iframe 所在的表格也设置为 100% 高度。这在使用 Chrome 和 Safari（都是 webkit）时非常有效，但在使用 Firefox 时根本不起作用。当我使用 Firefox 查看网站时，内容并没有填满页面高度的 100%，而只是一小部分。

下面是我的html：

<?php include("checkOnLogin.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fly Earth Staff Area</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" height="100%" id="main" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="header" colspan="2"><span id="text_flyearth">Fly Earth </span><span id="text_staffarea">Staff Area</span><span id="user_info"><?php include("getUserInfo.php"); ?></span></td>
  </tr>
  <tr>
    <td id="nav"><?php include("navBarMain.html"); ?></td>
    <td id="content"><iframe height="100%" width="100%" frameborder="0" src="/memchat"></iframe></td>
  </tr>
</table>
</body>
</html>

还有 CSS：

@charset "UTF-8";
/* CSS Document */

html {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}

body {
    border:0;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

#main {
    width:100%;
    height:100%;
}

#header {
    height:40px;
    background-image:url(images/header_bg.png);
    background-repeat:repeat-x;
    vertical-align:middle;
}

#text_flyearth {
    font-size:20pt;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    position:relative;
    left:5px;
    color:#333;
}

#text_staffarea {
    font-size:20pt;
    font-weight:normal;
    font-family:Arial, Helvetica, sans-serif;
    position:relative;
    left:5px;
    color:#333;
}

#nav {
    background-color:#CCC;
    width:200px;
    text-align:left;
    vertical-align:top;
}

#content {
    background-color:#FFF;
    vertical-align:top;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12pt;
    padding:15px;

}

.navlink:link {
    text-decoration:none;
}

.navlink:visited {
    text-decoration:none;
}

.navlink:hover {
    text-decoration:underline;
}

.navlink:active {
    text-decoration:underline;
}

.navlink {
    color:#333;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14pt;
    position:relative;
    top:30px;
    left:15px;
}

.navlinksmall:link {
    text-decoration:none;
}

.navlinksmall:visited {
    text-decoration:none;
}

.navlinksmall:hover {
    text-decoration:underline;
}

.navlinksmall:active {
    text-decoration:underline;
}

.navlinksmall {
    color:#333;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11pt;
    position:relative;
    top:30px;
    left:15px;
}

#redlogin {
    color:#F00;
}

#user_info {
    font-family:Arial, Helvetica, sans-serif;
    color:#FFF;
    font-size:15pt;
    text-align:right;
    float:right;
    position:relative;
    top:3px;
    right:5px;
}

非常感谢您的帮助！罗伯特

【问题讨论】：

标签： html css firefox iframe safari

【解决方案1】：

您的表格行和表格单元格都没有指定高度，因此根据规范，iframe 应该具有自动高度。

【讨论】：

感谢您的回答。如何在保持 100% 桌面高度的同时解决这个问题？如果我指定一个单元格或行高（不是 100%，这是现在设置的表格高度），布局将不再适应浏览器窗口的高度，并且将被固定。此外，整个表格的高度设置为 100%，第一行高度设置为 40px，那么第二行不应该占用页面上的其余空间而无需我显式设置行高吗？这就是允许我根据浏览器窗口高度创建这种流畅布局的原因。
为正确的 calc() 表达式指定第二行高度（可能根据需要添加前缀）是否符合您的要求？
再次感谢您的帮助！我想我会让你知道我将第二行（导航和内容）中每个单元格的高度设置为 100%，现在一切都在 Firefox 和其他浏览器中按预期工作。我现在意识到这两个单元格的 100% 高度意味着父容器的 100%，在这种情况下，它是第二行。再次感谢！