If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I can't think of a way for the Iframe to resize itself but maybe you can take a look at one of twitter's widgets. It fits the container nicely.
Maybe they use JS to check the container's width and then pass correct width and height for the IFRAME

sorry if silly question, I have a problem about the iframe code, if within the iframe external (external website) there is a link, can the iframe size change if I click the link to it, can by using the code that you share? What kind of code should I use, please give me help

Automatically resizing an iframe when it loads

You can use the onload event of the iframe to set its size, so that when the new document loads, the resize-to-fit-contents function is called.

Unfortunately you have to do this in two ways, one for older version of internet explorer. But it's not much trouble, you just test if the iframe has a readyState property, and if it does, you can do it the ie-specific way.

I've ammended my example to set an onload event that fires in all major browsers, and demonstrates doing so both when you load a new page in code, and when you click on a link within the iframe.

From further testing, it seems "document.documentElement.scrollHeight" is more reliable in more situations than "document.body.scrollHeight", and so should be used instead.

The latter doesn't always give the desired value if the frame is already bigger than the document it contains. So in some browsers it won't cause the iframe to shrink to fit a smaller document (only grow to fit a bigger one).

To use document.documentElement.scrollHeight instead, make sure all of your pages tell the browser to use standards mode, by putting a doctype (e.g. <!doctype html> ) as the first line of your html code.

Hey interfacetricks, your solution seems to be exactly what I need but I am totally unable to get the height to automatically stretch in height.....I have one page that contains all the code:

<html>
<head>
<script>

// Resize an iframe so it's as tall as its contents. This could be much shorter but is expanded for clarity.
function size_frame(frame_name, frame_id)
{
// Get the iframe element
var frame_element = document.getElementById(frame_id);

// Get the iframe frame-window object. Note this has different properties to frame_element.
var frame_window = frames[frame_name];

// Set the height to 1px first, because some browsers will give you the maximum height of either the
// frame or its contents, when you try to read the scrollHeight property as we do below.
frame_element.style.height = "1px";

// set the height of the iframe element to the "scrollHeight" of the document element of the frame window.
frame_element.style.height = frame_window.document.documentElement.scrollHeight +"px";
}

// Assign an onload event to an iframe so that it automatically sizes itself to the height
// of its contents. Then change the source of the iframe to makes this event occur.
function do_auto_resize()
{
// Get a reference to the frame element.
var frame = document.getElementById("frame_id1");

You can use the onload event of the iframe to set its size, so that when the new document loads, the resize-to-fit-contents function is called.

Unfortunately you have to do this in two ways, one for older version of internet explorer. But it's not much trouble, you just test if the iframe has a readyState property, and if it does, you can do it the ie-specific way.

I've ammended my example to set an onload event that fires in all major browsers, and demonstrates doing so both when you load a new page in code, and when you click on a link within the iframe.