Question

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

我的目标是使iframe只适合页面宽度的85％（有效！），从屏幕顶部100px（也可以），然后底部适合我浏览器底部的边缘（那就是我被困住的地方......）

HTML

<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

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

This Microsoft Support article解释得很清楚。

仅供参考，javascript screen.width＆amp; screen.height将为您提供屏幕分辨率。

Answer 2

如果你有Fx4，一个简单的height: -moz-calc(100%-100px)就可以了。可惜这个功能在CSS3中引入并支持得很晚。

Answer 3

如果100px顶部用于导航iframe的标签，则可能有解决方法。只需将iframe填充到100％高度，然后将这些标签放在 iframe中作为另一个具有固定大小的iframe。或者只是求助于frameset。

这是否适合你取决于你的确切设计，但希望有所帮助。

iframe / CSS：强制iframe适合屏幕

3 个答案: