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和身體）

回答

相關問題