Styling iFrame

[george]

I have an iFrame which is linked to from a few anchor tags. That part works fine. My problem is, I'd like the height of my iFrame to be inherited from it's contents. I did notice that in the example page for iFrames setting the height to 100% works as I would expect. But not on my page. I did notice that when I create a CSS property using the iFrame's ID tag, and put a number of pixels in the CSS width and height attributes, they were accepted and the browser rendered appropriately. But not when I try and use 100% or auto or inherit. What can I do so the height is based on the content of the iFrame?

Edited April 30, 2012 by george

[eTianbun]

% (percent): Is a way of calculatiing something, base on #/100. You use % to set width/height of an element, relating to it parent and not it content!

[dsonesuk]

Use javascript

<script type="text/javascript"><!--//function sizeFrame() {    var F = document.getElementById("myFrame");    var frameMethod = F.contentDocument.documentElement || F.contentWindow.document.body; // IE or other browser method             F.height = frameMethod.scrollHeight;        } window.onload=sizeFrame;//--></script>

<iframe width="100%" id="myFrame" src="mysite.html" scrolling="no" frameborder="0" />An iframe capable browser isrequired to view this web site.</iframe>

[george]

Thank you dsonesuk

[george]

Using the approach suggested above, I get unexpected results. Right now, my site presents an alert box giving the scrollHeight for the iFrame content.If you go to the site, when it initially loads the Home page in the iFrame, and you will see the frame scrollHeight given, and when you scroll the page, you will see this is very close. When you select the My Resources menu option, the iFrame source is updated, and the alert box reflects the change in scrollHeight very closely.But then select the Home option, and the alert box shows a new value, which is far too large, and the height of the iFrame is also far too large. And when I keep selecting Home, each time the scrollHeight decriments. Mystery. Any ideas?

[dsonesuk]

clear the height before applying new

function load() {        var F = document.getElementById("myFrame");        var frameMethod = F.contentDocument.documentElement || F.contentWindow.document.body; // IE or other browser method        F.height ="";        F.height = frameMethod.scrollHeight;        alert(F.height );}

[george]

That did it dsonesuk.Now to document why this works, so I can learn something.