我认为这不是又一个“根据内容高度调整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本身能否实现这个效果?