Высота HTML iframe не работает правильно в Firefox (высота родительского контейнера равна 100%, а также html и body) - PullRequest
1 голос
/ 13 февраля 2012

Я пытаюсь создать iframe с высотой 100% и шириной 100%.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;
}

Большое спасибо за любую помощь!Роберт

1 Ответ

4 голосов
/ 13 февраля 2012

Ни ваша строка таблицы, ни ее ячейка не имеют заданной высоты, поэтому в соответствии со спецификацией у iframe должна быть автоматическая высота.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...