Variable Height Iframes

I know Iframes suck! And they must be avoided as much as possible... but the fact is that they are sometimes the easiest and/or the only possible way.(GMail is all iframes). One thing that sucks about Iframes is that it's  height is constant, independent of the content it is holding. And hence either there is some extra whitespace or a very irritating scroll bar.

Here is a script that will help you make a scrollbar free iframe:


function setHeight(ele) {
saveele = ele;
var oDoc = (ele.contentWindow || ele.contentDocument);
if (oDoc.document) oDoc = oDoc.document;

var D = oDoc;
h = Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) {
h = oDoc.height;
}
ele.height = h;
}


Here is a working example.

I hope it helps :)