HTML iframe 高度在 Firefox 中无法正常工作（父容器高度为 100%，html 和 body 也是如此）
我正在尝试创建一个高度为 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;
}
非常感谢您的帮助！ 罗伯特
I am trying to create an iframe with a height of 100% and a width of 100%. The html and body are both set to 100% height, and the table that the iframe is in is also set to 100% height. This works perfectly when using Chrome and Safari (both webkit), but does not work at all when using Firefox. When I view the site using Firefox, the content does not fill 100% of the page height, but just a small portion.
Below is my 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>
And 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;
}
Thanks so much for any help!
Robert
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
表格行和表格单元格都没有指定的高度，因此根据规范，iframe 应该具有自动高度。
Neither your table row nor table cell has a specified height, so per spec the iframe should have auto height.