How to dynamically adjust an iframe’s heightMatt Cutts: Gadgets, Google, and SEO

January 14th, 2008 | Category: Tech Talk

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 that:

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

<html>
<head> <title>Child frame</title> </head>
<body bgcolor=”#000000″>


Child frame.
Child frame.
Child frame.
Child frame.
Child frame.
Child frame.
Child frame.
Child frame.


</body>
</html>

Now in the parent frame, you can produce cipher like that:

<html>
<head> <title>Parent frame</title> </head>

<body onload=”resizeFrame(document.getElementById(’childframe’))” bgcolor=”#cccccc”>

<script type=”text/javascript”>
// Firefox worked fine. Net Explorer shows scrollbar considering of frameborder
operate resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
}
</script>

Parent frame.
Parent frame.
Parent frame.
Parent frame.


<iframe frameborder=0 border=0 src=”./child-frame.html” name=”childframe” id=”childframe”>
</iframe>


</body>
</html>

You can additionally see a live example of resizing an iframe

height dynamically.

What does that cipher do? When the body of the parent frame loads, it looks up the document element “childframe” which corresponds to the iframe. thereupon the page calls a operate resizeFrame(). The operate 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. whether you leave off the frameborder attribute, Web 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 society too.

Anyway, feel free to rip on my cipher 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.