Javascript 父窗口调整大小时如何调整 iframe 的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6634582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize iframe when parent window resizes
提问by T9b
I don't think this is not another "resize iframe according to content height" question.
我不认为这不是另一个“根据内容高度调整 iframe 大小”的问题。
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
我实际上想根据父窗口的调整大小动态调整 iframe 的大小。对于 JS Fiddle 粉丝，我这里有一个例子
For those who want to look at the code on SO:
对于那些想查看 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:
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;
}
}
There may be a bit of odd CSS there - I cobbled it together from the actual page. Apologies.
那里可能有一些奇怪的 CSS - 我从实际页面拼凑起来。道歉。
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.
如您所见，当您调整窗口大小时，绿色 div 会相应地动态更改高度。我想知道的是，这是否可以通过 div 左侧的 iframe 来完成。
Can CSS alone make this happen?
仅靠 CSS 就能做到这一点吗？
回答by Nick Husher
I created a new jsfiddlethat 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.
我创建了一个新的 jsfiddle，它可以为您提供原始 css 所需的内容。我没有广泛测试跨浏览器，尤其是在 IE 中。我预计 IE8 和 9 会得到支持，但会犹豫说 7 会不会出现问题。
The relevant changes:
相关变化：
/* 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%;
}
回答by Craig M
I think this does what you're after.
我认为这就是你所追求的。
First I wrapped the iframe in a div, and set the iframe's width and height to be 100%.
首先我将 iframe 包裹在一个 div 中，并将 iframe 的宽度和高度设置为 100%。
HTML
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
CSS
#frameContainer {
margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
iframe#frame2 { width: 100%; height:100% }
Then I added the following jQuery code.
然后我添加了以下 jQuery 代码。
$(function() {
var widthRatio = $('#frameContainer').width() / $(window).width();
$(window).resize(function() {
$('#frameContainer').css({width: $(window).width() * widthRatio});
});
});
回答by Kon
You can set the width and height of the iframe element to be percentage-based. Here's an example where width is 75% and will dynamically change when you increase/decrease the width of your browser window: http://jsfiddle.net/fallen888/pkjEB/
您可以将 iframe 元素的宽度和高度设置为基于百分比。这是一个示例，其中宽度为 75%，并且会在您增加/减少浏览器窗口的宽度时动态更改：http: //jsfiddle.net/fallen888/pkjEB/
回答by md27
This worked for me:
这对我有用：
div#content iframe {width: 100%}
