How to resize iframe when parent window resizes

Question

I don't think this is not another "resize iframe according to content height" question.

I actually want to resize the iframe dynamically according to a resize of the parent window. For JS Fiddle fans I have an example here

For those who want to look at the code on SO:

<div id="content">
<iframe src="http://www.apple.com" 
 name="frame2" 
 id="frame2" 
 frameborder="0" 
 marginwidth="0" 
 marginheight="0" 
 scrolling="auto" 
 allowtransparency="false">
</iframe>
</div>
<div id="block"></div>
<div id="header"></div>
<div id="footer"></div>

CSS:

body {
margin: 0px;
padding-top: 78px;
padding-right: 0px;
padding-bottom: 25px;
padding-left: 0px;
min-height: 0px;
height: auto;
text-align: center;
background-color: lightblue;
overflow:hidden;
}
div#header {
top: 0px;
left: 0px;
width: 100%;
height: 85px;
min-width: 1000px;
overflow: hidden;
background-color: darkblue;
}
div#footer {
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
min-width: 1000px;
background-color: darkblue;
}
iframe#frame2 {
margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
div#block {
background-color: lightgreen;
margin: 40px;
position: fixed;
top: 80px;
left: 350px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
@media screen {
body > div#header {
position: fixed;
}
body > div#footer {
position: fixed;
}
}

There may be a bit of odd CSS there - I cobbled it together from the actual page. Apologies.

As you can see the green coloured div dynamically changes height accordingly when you resize the window. What I'd like to find out is if this can be done with the iframe to the left of the div.

Can CSS alone make this happen?

• Guffa: Your JsFiddle link doesn't work.
• T9b: Thanks I fixed it. The JSFiddle link should work now...

Answer 1

I created a new jsfiddle that gets you what you need in raw css. I didn't test cross-browser extensively, particularly in IE. I would anticipate support in IE8 and 9, but would be hesitant to say that 7 would work without hiccups.

The relevant changes:

 /* This contains the iframe and sets a new stacking context */
div#content {
 position: fixed;
 top: 80px;
 left: 40px;
 bottom: 25px;
 min-width: 200px;
 background: black; 
 /* DEBUG: If the iframe doesn't cover the whole space,
 it'll show through as black. */
}
 /* Position the iframe inside the new stacking context
 to take up the whole space */
div#content iframe {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100%;
 width: 100%;
}

Answer 2

I think this does what you're after.

First I wrapped the iframe in a div, and set the iframe's width and height to be 100%.

HTML

<div id="frameContainer"><iframe src="http://www.apple.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe></div>

CSS

#frameContainer {
 margin: 40px;
 position: fixed;
 top: 80px;
 left: 0px;
 width: 200px;
 bottom: 25px;
 min-width: 200px;
}
iframe#frame2 { width: 100%; height:100% }

Then I added the following jQuery code.

jsFiddle

$(function() {
 var widthRatio = $('#frameContainer').width() / $(window).width();
 $(window).resize(function() {
 $('#frameContainer').css({width: $(window).width() * widthRatio});
 }); 
});

• T9b: This also worked, but I chose the other answer because it was pure CSS, but I conceded that the use of Jquery probably aids compatibility
• user456584: For me, (just testing the jsFiddles) this is the only option of the two that worked, even in Chrome.

Answer 3

You can set the width and height of the iframe element to be percentage-based. Here's an example where width is 75% and will dynamically change when you increase/decrease the width of your browser window: http://jsfiddle.net/fallen888/pkjEB/

• T9b: This is not the answer. I need it to behave like the div called blockin the example. The top edge and bottome edge of this div is always the same distance in pixels away from the top and the bottom. That's not the same as making the element a %age of the height.

Answer 4

This worked for me:

div#content iframe {width: 100%}