Iframe/CSS：强制 Iframe 适合屏幕

Question

我目前正在尝试让 iframe 适合我的屏幕尺寸，以及任何其他以不同分辨率使用它的用户，除非无论我尝试什么，最终都会导致 iframe 太小或高度太大导致双滚动条。（iframe 和页面本身有滚动条）。

我的目标是让 iframe 仅适合页面宽度的 85%（这有效！），距屏幕顶部 100 像素（也有效），然后让底部适合我的浏览器底部的边缘（这就是其中的位置）我被困住了...）

超文本标记语言

<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>

CSS：

.maindiv {
width: 85%; 
top: 100px;
}

.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}

如果有什么意义的话，我在我的页面上运行了最新的jquery，如果它有帮助的话。提前致谢！

Answer 1

使用onload()iframe 的事件和onresize()窗口的事件将 iframe 的大小调整为所需的大小。

这篇 Microsoft 支持文章对此进行了很好的解释。

仅供参考，在 JavaScript 中screen.width&screen.height将为您提供屏幕分辨率。