Home/ Questions/Q 7491127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T15:53:00+00:00

I am trying to create an iframe with a height of 100% and a

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Neither your table row nor table cell has a specified height, so per spec the iframe should have auto height.

    • 0