Question

169

How to resize iframe when parent window resizes

rated 0 times [ 176] [ 7] / answers: 1 / hits: 50062 / 13 Years ago, sat, july 9, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hasancolec

Add To Favorites

Follow

Total Points: 603

Total Questions: 95

Total Answers: 98

Location: South Korea

Member since Sat, Oct 2, 2021

3 Years ago

answered 13 Years ago emerald · Accepted Answer

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%;

}