View Full Version : Iframe dynamic size inside div

Jul 26th, 2010, 06:23 AM
I am working on a site where I want to change the content area of my page with out refreshing the whole screen. I thought I should be able to do this using some JavaScript and changing the src property of an iframe to meet the url I want. (Ultimately the content page will be one page pulling form a database using php). I am using the site as reenforcement on some thing I have been studying so I am still learning. However I have run into a slight problem.

The IFrame will not resize to allow all content to be seen with out scroll bars. I have the CSS stating the iframe be set to width: 100% and height: 100%. The Iframe lies inside the div id="content". The Div ID Content is part of body. The div ID content is also set to 100% / 100% and body is set to nothing. If i fill the content in with text it resizes. What I went is when the the content in the iframe get bigger that the iframe element expands in height so the content div fills up in height. So I want it to act like it would if I was just typing in content.

Here is a test site I set up to show the issue.
http://angelvamp.com/temp/index.html (Main Page)
http://angelvamp.com/temp/style.css (CSS)
http://angelvamp.com/temp/content.html (the page the IFrame is pulling)

I ran through several page and search around but I can't tell if this is possible or I am just messing it up. Any help would be much appreciated.

Also I am testing in firefox 3.6.8, Chrome 5.0.375.99, and Safari 5.0. If you open the page in IE it will look horrid and the iframe is worse than all the others. I am going to address this later.