Junior Coders
100% height IFRAME content
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?
Junior Coders
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...
Elite Coders
In Firefox, height:100% ALSO calculates the padding/margins into the the equation. To make sure it is exactly 100%:
Code:* {padding:0px;margin:0px;}
- Mike
Junior Coders
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)
Senior Coders
Do you have access to the page within the iframe?
....(o_ Penguins
.---/(o_- techno_racing
+(---//\-' in
.+(_)--(_)' The McMurdo 500
Elite Coders
Set a padding to the elements inside the div with the height of 100%.Ok, so how can I pull off a 100% height with a margin in the iframe document?
- Mike
New Comer (less than 5 posts)
Thankyou dojjen69 !!!!!!!
your answer just helped me with my iframe height trouble, i'm so relieved...
(had to take out the - id="main" - bit though!)
you're the bestest.
jess
Elite Coders
The id="main" shouldn't have anything to do with it, but I guess if it works, it works.
- Mike
New Comer (less than 5 posts)
100% iFrame height
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:http://www.frontpagewebmaster.com/m-89000/tm.htm by amir_harel to his site: http://www.amirharel.com/2009/07/28/implementing-iframe-toolbar/
Posting Permissions
Bookmarks