make iframe height fit content

Question

How would I make an iframe's height adjust to the content within it? I assume you'd calculate the difference between the content height and iframe height (something I don't know how to do) and use that with a while loop to increment a variable to use as a height, but I can't wrap my head around how to actually do these things. Before asking: yes, the content in the frame is from my site. Not cross-domain.

Answer 1

Not quite sure why you want to use an iframe and not a dynamic div filled, say, via ajax, but:

Put the content within the iframe into a div, then get the height of the div. I'd suggest using jquery like so:

$("#divId").height();

But if you can't use jquery, you should be able to use this:

document.getElementById("divId").offsetHeight;

Then you'd need to set the iframe's height to whatever you got.

jquery:

$("#iframeId").height($("#divId").height());

regular js:

document.getElementById("iframeId").style.height = 
document.getElementById("divId").offsetHeight;