我不认为这不是另一个“根据内容高度重新调整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可以单独实现吗?
答案 0 :(得分:18)
我创建了一个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%;
}
答案 1 :(得分:7)
我认为这就是你所追求的目标。
首先我将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代码。
$(function() {
var widthRatio = $('#frameContainer').width() / $(window).width();
$(window).resize(function() {
$('#frameContainer').css({width: $(window).width() * widthRatio});
});
});
答案 2 :(得分:2)
您可以将iframe元素的宽度和高度设置为基于百分比。以下是宽度为75%的示例,当您增加/减少浏览器窗口的宽度时会动态更改:http://jsfiddle.net/fallen888/pkjEB/
答案 3 :(得分:1)
这对我有用:
div#content iframe {width: 100%}