javascript - 如何在父窗口调整大小时调整 iframe 的大小

Question

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

我实际上想根据父窗口的大小动态调整 iframe 的大小。对于 JS Fiddle 爱好者，我有一个例子 here

对于那些想查看 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 - 我从实际页面中拼凑而成。抱歉。

如您所见，当您调整窗口大小时，绿色的 div 会相应地动态更改高度。我想知道的是，这是否可以通过 div 左侧的 iframe 来完成。

仅靠 CSS 就能做到这一点吗？

Answer 1

我创建了一个 new jsfiddle这让你在原始 CSS 中得到你需要的东西。我没有广泛测试跨浏览器，尤其是在 IE 中。我期待 IE8 和 9 的支持，但我不敢说 7 可以正常工作。

相关变化:

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