如何在父窗口调整大小时调整iframe
How to resize iframe when parent window resizes
我认为这不是另一个"根据内容高度调整iframe大小"的问题。
我实际上想根据父窗口的大小动态地调整iframe的大小。对于JS小提琴爱好者,我在这里有一个例子
对于那些想要查看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可以单独实现吗?
我创建了一个新的jsfiddle,它可以为您提供所需的原始css。我没有广泛地测试跨浏览器,特别是在IE中。我希望IE8和ie9能支持,但我不敢说ie7能正常工作。
相关变化:
/* 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包装在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});
});
});
可以设置iframe元素的宽度和高度为百分比。下面是一个宽度为75%的例子,当你增加/减少浏览器窗口的宽度时,它会动态变化:http://jsfiddle.net/fallen888/pkjEB/
这对我有用:
div#content iframe {width: 100%}
相关文章:
- Firefox:根据实际内容调整iframe的大小
- 如果iframe通过单击加载,则自动调整iframe大小无效
- 在内容刷新或更新时调整iframe的大小
- 我需要一种自动调整iframe大小的方法,无论我查到什么,它都不起作用
- 调整 iframe 的大小,以便在每次更改 src 时包装其内容
- 如何根据 iframe 的大小调整 iframe 内容的大小
- JavaScript调整iFrame大小-适用于Firefox/IE,但不适用于Chrome
- 如何在窗口调整大小时调整iframe的大小
- Javascript没有调整iframe的大小
- 我可以使用jQuery来调整iframe的大小以填充剩余的窗口空间吗
- 在跨域站点中动态调整iframe的大小
- 加载新内容时调整iframe的高度
- 根据提交单击动态调整 iFrame 的高度
- JavaScript 调整 iframe 的大小,但 iframe 中的元素具有相对大小
- 调整 iframe 的大小以适合多个页面上的内容
- 通过 JavaScript 调整 iFrame 内容的大小
- 根据 DIV 大小调整 iFrame 的大小
- 可以在不重新加载框架的情况下调整 iframe 的大小
- 动态调整 Iframe 大小以与 Chrome 配合使用
- 使用 js 调整 iframe 的大小在 https 时停止工作