Calculating automatic IFrame height in IE/Firefox/Safari - what is the correct way?

Question

Hi, I've browsed through many websites and in here, and could not find a final answer as each one has its errors. I need to have an automatic IFrame height, meaning if the content changes, the Iframe must adapt its height to the content. For this I need to see how to get the correct content height?

As I understand the most correct way is to use : document.getElementById('myIframe').style.pixelHeight = document.getElementById('myIframe').contentWindow.document.body.scrollHeight;

This however doesnt work in all browsers correctly. in IE I see height is too small (has about 8 pixels less height than should). in Firefox when reducing the content size, the scrollHeight isnt reduced at all. and in Safari it doesnt work as well.

So , for final questions, what is the most correct, and proved working way of getting the content height - what height should the IFrame be set?

Thanks, Tal.

Answer 1

The IE problem is probably frameborder. When you set iframe height in IE, it is inclusive of several pixels of special iframe border. The frameborder doesn't count as a normal CSS border and can't easily be turned off dynamically from script.

You could add a few pixels in IE to compensate for the frameborder, or write:

<iframe frameborder="0">

to turn the border off (if you do want a real border around the frame, you can put a new one in using CSS).

document.body.scrollHeight may not match the height of the document in a few cases:

1. If the body of the document in the iframe has a margin (as body does by default). Set margin and padding on body to 0.

2. If you are working in Quirks Mode, in which case document.body represents some aspects of the viewport, which you would normally expect to see only in document.documentElement. In this case setting the iframe's height directly sets the viewport height which document.body will then report back. This is presumably why the iframe will not shrink in Firefox.

Don't use Quirks Mode, you should always be using a Standards Mode doctype today. If you must support pages in Quirks mode, you could try wrapping the whole page in a div, and reading the offsetHeight of that.

The Safari problem might be caused by the use of pixelHeight, which is a bogus IE extension. In prefence use:

style.height= number+'px';

This is all a nasty hack; iframes are specifically designed not to respond to document size. Consider using in-page elements such as content templated in at the server side, or dragged in using AJAX instead.