如何在父窗口调整大小时调整iframe大小 [英] How to resize iframe when parent window resizes

问题描述

我不认为这不是另一个根据内容高度调整大小iframe问题。

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

我真的想根据调整大小来动态调整iframe父窗口。对于JS Fiddle粉丝，我有一个示例这里

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

对于那些想要查看SO上的代码：

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

可能有一些奇怪的CSS从实际页面拼凑起来。道歉。

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

正如你可以看到，当调整窗口大小时，绿色的div动态地改变高度。我想知道的是，如果这可以通过iframe在div的左边。

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.

可以单独使用CSS吗？

Can CSS alone make this happen?

推荐答案

新的jsfiddle ，可以得到你在raw css中所需要的。我没有测试跨浏览器广泛，特别是在IE。我会预计在IE8和9的支持，但会犹豫，说7将工作没有打嗝。

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.

相关的更改：

    /* 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%;
}

这篇关于如何在父窗口调整大小时调整iframe大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！