HTML iframe的高度不能在Firefox正常工作（父容器高度为100％，以及HTML和身体）

我想创建100％的高度和100％的宽度的iframe。 html和body都设置为100％高度，并且iframe所在的表格也设置为100％高度。当使用Chrome和Safari（都是webkit）时，这很好，但在使用Firefox时完全不起作用。当我使用Firefox查看网站时，内容不会填充页面高度的100％，但只占一小部分。HTML iframe的高度不能在Firefox正常工作（父容器高度为100％，以及HTML和身体）

下面是我的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; 
}

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

来源

2012-02-13 Robert

无论你的表行，也不表格单元格有一个指定的高度，所以每个规格的iframe应具备自动高度。

来源

2012-02-13 05:45:06

谢谢您的回答。我如何解决这个问题，同时仍然保持100％的桌面高度？如果我指定单元格或行高（不是100％，这是该表的高度现在设置为），布局将不再调整到浏览器窗口的高度，将其固定。此外，整个表格的高度设置为100％，第一行高度设置为40像素，所以不应该在第二行占用页面上的剩余空间没有我明确地设置行的高度？这就是允许我基于浏览器窗口高度创建流体布局的原因。 – Robert 2012-02-13 07:44:13

是否将第二行高度指定为正确的calc（）表达式（可能需要前缀）做你想做的事情？ – 2012-02-13 15:05:27

再次感谢您的帮助！我想我会让你知道，我设置每个单元的高度第二行（NAV和内容）到100％，而现在一切都按预期工作在Firefox和其他浏览器。我现在认识到，这两个单元格的100％高度意味着父容器的100％，在这种情况下，它是第二行。再次感谢！ – Robert 2012-02-13 22:50:26

HTML iframe的高度不能在Firefox正常工作（父容器高度为100％，以及HTML和身体）

回答

相关问题