Log in

View Full Version : 100% height IFRAME content


phb5000
04-19-2007, 05:21 PM
Hi,

When the content page (iframe's src) contains a div with a height of 100% the content always exceeds the iframe's height and thus causes a scrollbar to appear, which I dont want.

I want the height of the content to fit EXACTLY inside my iframe. Why won't this work?
dojjen69
04-19-2007, 05:39 PM
well.. I'm by no means an expert... far from it... I'm more of a cut & paste hack... but this works for me...

remove the 100% height from the div.

enter this into the <head> section of the parent

<script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;

//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
</script>


Then call the iframe like this...
<iframe src="whatever.html" id="the_iframe" onLoad="calcHeight();" id="main" height="1"></iframe>

Hope it helps...
mburt
04-19-2007, 06:38 PM
In Firefox, height:100&#37; ALSO calculates the padding/margins into the the equation. To make sure it is exactly 100%:

* {padding:0px;margin:0px;}
phb5000
04-19-2007, 08:35 PM
Ok, so how can I pull off a 100% height with a margin in the iframe document?

I want my 100% height and 100% width div (thats inside the iframe) to have either padding or margin, but not exceed the document width/height?

Possible? (without js tweaking :p )
techno_race
04-20-2007, 12:57 AM
Do you have access to the page within the iframe?
mburt
04-20-2007, 10:41 AM
Ok, so how can I pull off a 100&#37; height with a margin in the iframe document?
Set a padding to the elements inside the div with the height of 100%.
jess116
05-02-2007, 09:16 AM
Thankyou dojjen69 !!!!!!!
your answer just helped me with my iframe height trouble, i'm so relieved...:D
(had to take out the - id="main" - bit though!)
you're the bestest.

jess
mburt
05-02-2007, 10:32 AM
The id="main" shouldn't have anything to do with it, but I guess if it works, it works.
gazkee
12-04-2009, 10:56 PM
:confused::(I've been searching for days for a fix with most results advising it cant be done [goal to have an external site in one of my pages via iFrame with the iFrame height adjusted to the length of the external sites content with no vertical scroll bar in the iFrame unless the external sites page is long [so no vertical scroll bar on the browser either, so no 2 scroll bars, only 1 for the iFrame]

Finally found a solution on this page: :D:eek:;)http://www.frontpagewebmaster.com/m-89000/tm.htm by amir_harel to his site: http://www.amirharel.com/2009/07/28/implementing-iframe-toolbar/ (http://www.amirharel.com/2009/07/28/implementing-iframe-toolbar/)