Question

我正在尝试创建一个高度为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;
}

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

Answer 1

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

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

1 个答案: