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

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

实际上，我想根据父窗口的大小动态调整iframe的大小。对于JS小提琴迷，我有一个例子

对于那些想在上查看代码的人，请：

<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——我是从实际页面拼凑而成的。抱歉

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

---

仅CSS就可以做到这一点吗？

您可以将iframe元素的宽度和高度设置为基于百分比的。这里有一个例子，宽度是75%，当你增加/减少浏览器窗口的宽度时，它会动态变化：

我想这就是你想要的

首先，我将iframe包装在一个div中，并将iframe的宽度和高度设置为100%

HTML

然后我添加了以下jQuery代码

我创建了一个可以在原始css中获得所需内容的。我没有广泛地测试跨浏览器，特别是在IE中。我预计IE8和IE9会得到支持，但如果说IE8和IE9可以正常工作，我会犹豫不决

相关变化：

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

这对我很有用：

div#content iframe {width: 100%} 

---

你的JSFIDLE链接不起作用。谢谢，我已经修好了。JSFIDLE链接现在应该可以工作了……这不是答案。我需要它的行为与示例中名为

块的
div
类似。此
div
的上边缘和下边缘与顶部和底部的距离始终相同（以像素为单位）。这与将元素设置为高度的%不同。这同样有效，但我选择了另一个答案，因为它是纯CSS，但我承认使用Jquery可能有助于我的兼容性（只是测试jsFiddles），这是两种方法中唯一有效的选项，即使在Chrome中也是如此。
#frameContainer {

    margin: 40px;
    position: fixed;
    top: 80px;
    left: 0px;
    width: 200px;
    bottom: 25px;
    min-width: 200px;

}

iframe#frame2 { width: 100%; height:100% }

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

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

div#content iframe {width: 100%}