Suppose you want to include a child iframe on your page. You’d like to resize the height of the child iframe so that it doesn’t show a scrollbar. That is, you want something that looks like this:

Here’s one way you can do it. First, make the iframe that you want to include. I made a file “child-frame.html” that looks like this:

Child frame

[COLOR=”#ffffff”]
Child frame.

Child frame.

Child frame.

Child frame.

Child frame.

Child frame.

Child frame.

Child frame.

[/color]

Now in the parent frame, you can make code like this:

Parent frame


// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
}

Parent frame.

Parent frame.

Parent frame.

Parent frame.

You can also see a live example of resizing an iframe height dynamically.
What does this code do? When the body of the parent frame loads, it looks up the document element “childframe” which corresponds to the iframe. Then the page calls a function resizeFrame(). The function sets the height of the frame to be the scrollHeight, which effectively removes the scrollbar.
The only tricky bit is the “frameborder=0 border=0″ attributes on the frame. If you leave off the frameborder attribute, Internet Explorer will assume that the frame should have a nonzero border, but it won’t include the frame border in the value it returns for scrollHeight. The net effect is that IE will show a scrollbar unless you add “frameborder=0″.
It always annoys me to dive into cross-browser development when it feels like things should be standardized. Looks like it annoys other people too.
Anyway, feel free to rip on my code in the comments, but I was looking for a simple, working example of setting an iframe’s height so that the iframe wouldn’t have a scrollbar.


How to dynamically adjust an iframe’s height - Read More...