Dynamically Resized IFrames - Part 1: Eliminating Multiple Scroll Bars

Summary

This article describes how to make an IFRAME in a page dynamically resize and expand/collapse to fill the browser window. This is a technique for eliminating multiple scroll bars; this method essentially removes the "browser" scroll bar and you are left only with thie inner IFRAME scroll bar (if the height of the content in the IFRAME forces it to appear at all). This method requires no scripting.

Part 2 "Dynamically Resized IFrames - Part 2: Fitting the Content" describes the opposite solution to too many scroll bars: eliminating the inner IFRAME scroll bar by resizing the IFRAME automatically based on its content size. This leaves only the standard browser scroll bar. This method requires scripting.

See the demo page for a live sample of this solution.

Browser Compatibility

This solution has been tested in Internet Explorer 6.0.

It has been reported as working in:

Netscape 7.02
FireFox 1.0.2

Please send us feedback if you find it works (or does not work) in other browser brands and versions.

Background

<IFRAME> tags are a simple way to quickly integrate web content from multiple web sites without the effort of building server-side interfaces.

But IFrames are typically sized to a fixed number of pixels, which does not allow them to fit neatly inside a "flexible page", where the page content expands and contracts as needed to fit the browser. This results in extra scroll bars, and in IFRAME-heavy designs like (SAP Enterprise Portal for example), can result in "scroll bar hell".

Fundamentally you have one of two choices to get rid of all those scroll bars:

you can get rid of the browser scroll bar, and let the user interact with the IFRAME (inner) scroll bar
you can get rid of the IFRAME scroll bar, and let the user interact with the browser (outer) scroll bar

You could of course turn off scroll bars completely in your IFRAMEs, but then the user has no way of accessing the content outside the visible region of the IFRAME.

This article discusses how to make the IFRAME streatch to fit the screen, effectively eliminating the "browser" scroll bar, leaving only the one inner scroll bar (if needed).

<IFRAME HEIGHT="100%" WIDTH="100%" >

First, set the IFRAME's HEIGHT and WIDTH attributes to "100%".

Internet Explorer 6.0 allows you to specify a % for the height and width of the IFRAME. If you set these to 100% this tells the browser to increase the size of the IFRAME to fit into the size of the IFRAME's immediate parent container; usually the table cell it is inside. (Using smaller % numbers is often not very useful because the size of the remaining white space then varies which can look strange to the user when you resize the window.)

However, setting HEIGHT=100% will often end up with the IFRAME only being a fraction of the full window size, because the browser has already determined the size of the containing TD table cell tag. So the trick becomes telling the browser to make the containing "parent" table cell and table element grow to fill the browser. This is contrary to basic table sizing in browsers, which try to shrink tables to the minimum size needed to fit around their content.

Set HEIGHT=100% on all ancestor TD and TABLE tags

So the problem is no longer with the IFRAME - it is properly growing to fill 100% of it's "available container space". You just have to make sure that it's container - the table cell - expands to fill all unused screen space. If you are using nested tables to lay out your page, this means:

Setting HEIGHT="100%" on all <TABLE> tags that directly or indirectly contain the IFRAME
Setting HEIGHT="100%" on all <TD> tags that directly or indirectly contain the IFRAME

Now, you may not see any difference right away, depending on whether your HTML editor has inserted a !DOCTYPE declaration at the top of your page.

HTML Versions and Standards Compliance

The other thing you may need to do is to change or remove any <!DOCTYPE...> declaration at the top of your HTML page. DreamWeaver MX 2004, for example, puts this header at the top of a new blank HTML page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Leaving this declaration as-is instructs IE to use "Standards Compliant" mode when rendering the visual layout of the HTML. This will make IE "collapse" the table cells vertically, effectively ignoring the 100% height setting. You have several options for telling IE to NOT render in standards compliant mode:

remove the !DOCTYPE declaration altogether (easy!)
if the doctype says "Transitional" (like the example above) then remove the URL component
if the doctype says "Strict" (or nothing) then change it to "Transitional" (or add it if needed) and remove the URL component
change "HTML 4.01" to "HTML 3.0" (or a lower version like 2.0 or no version)
...and several other ways - see related links below

Any one of these methods of telling IE not to use standards compliance mode will effectively tell IE to honor the 100% height setting and the tables will grow to fit the browser window.

See the demo page to see the final result - a resizing IFRAME.

100% doesn't really mean 100%

The browser will not actually make those tables and cells use 100% of their parent space - it will give the other table cells the minimum room they need for their content, then give the remainder to the table or cell that is asking for 100%. Think of the 100% setting as a request, not a command. You could set it to 80% in one cell if you have another table cell that is dynamically sized to 20%. But normally having only one box on the page be the "expanding" box is simplest to manage and meets users subconscious expectations.

Assuming the browser correctly expands the one inner table cell to use up all available screen real estate, the <IFRAME HEIGHT=100% WIDTH=100%> will expand to fill it, resulting in an IFRAME that does not look like an IFRAME, but like just part of the page, and it grows to fit into different screen resolutions and window sizes like a good page should.

But there is a bug in how IE 6.0 calculates table and cell sizes. If the bottom of your IFRAME is getting chopped off, see this article on the bug and how to avoid it.