当父窗口大小改变时如何调整iframe的大小

Question

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

实际上，我想根据父窗口的大小调整iframe的大小。对于JS Fiddle的粉丝，我在 这里提供了一个示例。

对于那些想在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会动态地相应地改变高度。我想知道的是是否可以在左侧的iframe中实现同样的效果。

CSS本身能否实现这个效果？

- T9b

---

你的 JsFiddle 链接无效。 - Guffa

谢谢，我已经修复了。JSFiddle链接现在应该可以使用了... - T9b

Answer 1

我创建了一个新的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%;
}

- Nick Husher

Answer 2

我认为这个可以满足你的需求。

首先，我将iframe放在一个div中，并将iframe的宽度和高度设置为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% }

然后我添加了以下jQuery代码。

jsFiddle

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

- Craig M

---

这个也可以，但我选择了另一个答案，因为它是纯CSS的，但我承认使用Jquery可能有助于兼容性。 - T9b

对我来说，（只是测试jsFiddles），这是两个选项中唯一有效的选择，即使在Chrome中也是如此。 - user456584

Answer 3

您可以将iframe元素的宽度和高度设置为百分比。以下是一个示例，其中宽度为75％，当您增加/减少浏览器窗口的宽度时，它会动态更改：http://jsfiddle.net/fallen888/pkjEB/

- Kon

---

这不是答案。我需要它的行为像例子中称为 "block" 的 div。该 div 的顶边和底边总是与顶部和底部保持相同距离。这并不等同于使元素成为高度的百分比。 - T9b

Answer 4

这对我有效：

div#content iframe {width: 100%} 

- md27