iframe help - Height

Question

Wreef 0 Light Poster

19 Years Ago

I have this code that won't display the iframe properly. When I use it, the iframe spans accross the page, but won't span down, fitting the entire page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WinBetaSecrets- Connecting the Beta Community</title>
<style type="text/css">
<!--
body {
 background-image: url([URL]);
 background-repeat: no-repeat;
}
.style3 { color: #FFFFFF;
 font-size: 18px;
 font-weight: bold;
}
-->
</style></head>
<body>
<div align="center"><a href="<A href=""><img">"><img src="[URL]" alt="logo" width="584" height="109" border="0" /></a></div>
<p align="left">&nbsp;</p>
<div style="height:100%; width:100%;">
<iframe src="[URL]http://thevistageeks.com/forums/index.php?act=idx[/URL]" height="100%" width="100%" frameborder="0" scrolling="yes">
</iframe>
</div>   
</body>
</html>

html-css web-design

3 Contributors
8 Replies
180 Views
5 Days Discussion Span
Latest Post 19 Years Ago Latest Post by blakisa

Dani AI

Generated 6 Months Ago

Short answer: the iframe isn’t filling the page because its height is being computed relative to a parent that has no explicit height, or because the framed page won’t let the parent read its size (same-origin rules). is correct that percent heights only work when the parent has a defined height. That explains why 100% width works but 100% height does not.

Two practical approaches (pick one):

Pure‑CSS: make the viewport/layout drive the iframe height so you don’t depend on nested percentages. Example patterns (replace header height with your actual value):

html, body { height:100%; margin:0; }
.container { min-height:100vh; display:flex; flex-direction:column; }
.header { height:120px; }
.main { flex:1; } 
iframe { width:100%; height:100%; border:0; display:block; }

Or simply size to the viewport:

iframe { width:100%; height:calc(100vh - 120px); }

JS with cooperation from the framed page: if the iframe loads pages from a different origin you cannot read its DOM height from the parent. The framed page must send its height to the parent (postMessage). Parent listens and applies that height; the child posts its scrollHeight after load or after navigation. Example (concept):

Parent listens and sets the iframe height when it receives a numeric message. Child posts its document height to window.parent. In production always verify e.origin (don’t use '*' in production).

Quick troubleshooting checklist tied to this thread:

Confirm DOCTYPE/standards vs quirks mode; inconsistent modes change computed heights.
Test with a same-origin page first to prove sizing code works.
Inspect the console for cross-origin access errors (if you tried to read iframe.document).
If you can’t change the child page (third‑party), use a CSS viewport solution; otherwise implement postMessage and have the child send its height on load/navigation.
As a last resort for very old browsers, a timer-based resize (what suggested) can work but is less elegant.

Notes for and : if scrollbars reappear after clicking inside the iframe, that indicates the child document height changed — use the postMessage pattern (child sends new height on every load/navigation) or a viewport-based CSS layout so internal navigation won’t create unexpected scrollbars.

All 8 Replies

MattEvans 473 Veteran Poster

19 Years Ago

100% height doesn't really mean anything in standards compatible mode... (XHTML Transitional is one of those modes).. It means 100% of the parent object height... So if the parent object ( a body element) has no height (the height of a body element is usually the height of its contents), then the height of the iframe will be the default iframe height, which then occupies 100% of the body element's height... you could try setting the body height to 100% (i.e. <body style="height:100%;">).. I've heard that can work in some cases, but it seems a bit nonsensical...

MattEvans 473 Veteran Poster

19 Years Ago

erm... that script seems to work based on a naming convention.. it's searching for iframes thta have IDs like "iFrame_[name]", where [name] is a value in an array called sTitleArray...

if you only have one iframe change the javascript code to:

function resize_iFrames(){
for (var i=0; i<sTitleArray.length; i++){
siFrameID = "Your iframe id"
// DOM (used to set height of iFrame on this page)
var oDOMiFrame = document.getElementById(siFrameID); 


//DHTML (used to get DIV inside of iFrame)
var oDHTMLiFrame = document.frames[siFrameID];
var oDHTMLiFrameDocument = oDHTMLiFrame.document

var oDOMiFrameDocument = oDOMiFrame.document
// wait til document's data is completely loaded then resize iFrame surrounding it
while (oDHTMLiFrameDocument.readyState != "complete" ) {} 
var oDIVwholePage = oDHTMLiFrameDocument.all['DIVwholePage']; // dhtml object model
// You can NOT get oDIVwholePage using DOM. That is, you can't get it using oDOMiFrameDocument.getElementById('DIVwholePage').
// MUST use DHTML model to GET the DIV inside the document inside the iFrame::: oDHTMLiFrame.window.document.all['DIVwholePage']
// MUST use DOM model to set the height of the iFrame!!! DHTML does not let me set height
oDOMiFrame.height = oDIVwholePage.offsetHeight+20;

}
}

(remove the greyed out parts, change the ID to the ID of your frame.

That code also seems to resize the iFrame relative to its contents... you may want to change the section in blue to:

oDOMiFrame.height = document.height;
[B]OR..[/B]
oDOMiFrame.height = window.height;

you may want to check out the table halfway down this page to find out which "height" you want...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Wreef 0 Light Poster · Answer 1 · 2006-12-08T10:38:32+00:00

Wreef 0 Light Poster

19 Years Ago

Can someone please help?

blakisa 0 Newbie Poster · Answer 2 · 2006-12-09T00:15:28+00:00

I am having the same problem. One of the solutions posted previously had the following info, however I was not able to figure it out. I tried the following code, but still does not work. Am I calling the function wrong?

<!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=iso-8859-1" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
function resize_iFrames(){
for (var i=0; i<sTitleArray.length; i++){
siFrameID = "iFrame" + sTitleArray;
//DHTML (used to get DIV inside of iFrame)
var oDHTMLiFrame = document.frames[siFrameID];
var oDHTMLiFrameDocument = oDHTMLiFrame.document
// DOM (used to set height of iFrame on this page)
var oDOMiFrame = document.getElementById(siFrameID);
var oDOMiFrameDocument = oDOMiFrame.document
// wait til document's data is completely loaded then resize iFrame surrounding it
while (oDHTMLiFrameDocument.readyState != "complete" ) {}
var oDIVwholePage = oDHTMLiFrameDocument.all; // dhtml object model
// You can NOT get oDIVwholePage using DOM. That is, you can't get it using oDOMiFrameDocument.getElementById('DIVwholePage').
// MUST use DHTML model to GET the DIV inside the document inside the iFrame::: oDHTMLiFrame.window.document.all
// MUST use DOM model to set the height of the iFrame!!! DHTML does not let me set height
oDOMiFrame.height = oDIVwholePage.offsetHeight+20;
}
}
</script>

</head>
<body>
<h1>Careers</h1>
<p>
< <a href="javascript:history.back();">back</a></p>
<IFRAME name=Original id=Original frameborder=1 src='' onLoad='resize_iFrames()'> </IFRAME>
</body>
</html>

blakisa 0 Newbie Poster · Answer 3 · 2006-12-09T05:00:06+00:00

Thanks appreciate the quick response :cheesy: Okay i tried it, however, it seems to still not automatically remove the scroll bars and make the height 100%. Here is the updated code. I tried a local file but still teh same issue. Any thoughts. Can someone try running the following from a browser to test it?

<!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=iso-8859-1" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
function resize_iFrames(){
siFrameID = "Original";
var oDHTMLiFrame = document.frames[siFrameID];
var oDHTMLiFrameDocument = oDHTMLiFrame.document
var oDOMiFrame = document.getElementById(siFrameID);
var oDOMiFrameDocument = oDOMiFrame.document
while (oDHTMLiFrameDocument.readyState != "complete" ) {}
var oDIVwholePage = oDHTMLiFrameDocument.all; // dhtml object model
oDOMiFrame.height = oDIVwholePage.offsetHeight+20;
}
</script>
</head>
<body>
<h1>Careers</h1>
<IFRAME name=Original id=Original frameborder=0 onLoad="resize_iFrames();"
src='' >
</IFRAME>
</body>
</html>

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 4 · 2006-12-09T06:23:51+00:00

well, here's a solution... it uses a Timer, so it's not optimal... but it should work on all browsers...

<!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=iso-8859-1" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
function lock_iFrame(named){
  var thisTimer = setTimeout("resize_iFrame('"+named+"')", 1000);
  return thisTimer;
}
function resize_iFrame(named){
  siFrameID = named;
  var targetFrame = document.getElementById(siFrameID);
  targetFrame.height = getHeight() - targetFrame.offsetTop;
}
/*This code is adapted from code in the example at http://www.howtocreate.co.uk/tutorials/javascript/browserwindow. Check it out, it's quite informative*/
function getHeight() {
  var myHeight = 0;
  if(typeof(window.innerHeight)=='number'){
    //Non-IE
    myHeight = window.innerHeight;
  }else if(document.documentElement && document.documentElement.clientHeight){
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  }else if(document.body && document.body.clientHeight){
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

</script>
</head>
<body onLoad="lock_iFrame('Original');">
<h1>Careers</h1>
<IFRAME name=Original id=Original frameborder=0 style="width:100%;" 
src='' >
</IFRAME>
</body>
</html>

EDIT: This code isn't really network-dependant; so it should work in a local file. I've tested it in a local file on Opera and Firefox 2.. I don't have IE on this computer so I can't test it there...

blakisa 0 Newbie Poster · Answer 5 · 2006-12-11T23:44:03+00:00

Thanks Matt. Seems to work in IE. One last issue is that when you do a click through the following pages still seem to add the scroll bar. So the first page is good but when you use the IFRAME or click the submit in it. Maybe IFRAME does not send the info back and forth and is limited this way?

blakisa 0 Newbie Poster · Answer 6 · 2006-12-11T23:51:16+00:00

Here is the web site im hosting it on.

iframe help - Height

Dani AI

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers