How to Resize IFrames in HTML

Iframes are inline frames within a web page that contain another document. Iframes are placed in html documents using the iframe tag. Web developers often find that the internal frame may be too small to view all the contents. Methods to resize iframes include specifying the height and width of the frame and using Javascript to dynamically resize the iframe.

Instructions

1. Edit the html document. Go to the lines of html that set the iframe. Change the height and width properties of the iframe to a percentage or pixel size. For example, "iframe height="50%"" or "iframe width="400px.""

2. Create a Javascript function. Make sure the source document of the iframe is on the same domain as the page that contains the iframe, since scripts on your webpage can only access properties of pages on the same domain. Microsoft's website displays free code for a Javascript script that resizes frames.

3. Start your Internet browser. Go to Microsoft's website. Search for knowledge base article 278469. Highlight the code in the Microsoft knowledge base article. Hit the "Ctrl" and "C" keys simultaneously to copy it.

4. Open Notepad. Hit the "Ctrl" and "V" keys to paste the code from the Microsoft article into a text file.

5. Replace the "YOUR_PAGE_HERE" after the "src" tag with the name of the file to be loaded in the inline frame. Save the file with an "htm" or "html" extension.

6. Look for other Javascript code to try if you aren't satisfied with these results. Many webmaster forums deal with this problem and lots of programmers post code that works for them.

Tips & Warnings

• The "try" and "catch" functions included in Microsoft's code will only work in Internet Explorer 5 and later.

Resources

• Microsoft's code for resizing an iframe