iframe/CSS：强制 iframe 适应屏幕答案

【问题标题】：Iframe/CSS: Forcing Iframe to fit screeniframe/CSS：强制 iframe 适应屏幕
【发布时间】：2011-04-19 03:55:04
【问题描述】：

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

我的目标是让 iframe 仅适合页面的 85% 宽度（可行！），距离屏幕顶部 100 像素（也可行），然后让底部适合我的浏览器底部的边缘（这就是我被卡住的地方......）

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，如果它有帮助的话。提前致谢！

【问题讨论】：

巨大的 iframe 有什么意义？
标签系统；这样 iframe 将填充所有页面，除了我必须在顶部的 100 像素。
你应该使用普通的链接并且没有 iframe（而不是溢出区域），如果你真的想要的话，使用 redundant XHR 进行即时加载。

标签： html css iframe

【解决方案1】：

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

This Microsoft Support article 解释的很好。

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

【讨论】：

screen.width 和 screen.height 在这里毫无用处，因为屏幕尺寸 != 可用于您的网页。
试一试。将 javascript 和两个值添加到我的 DIV 和 Iframe 中（并切换它们以确保我没有混淆自己），还尝试删除我的 CSS 行以使其正常工作，但不走运。使用我的 CSS 时，iframe 占页面的 85%，但高度可能为 150 像素，而没有我的 CSS 时，它只是一个框。不知道我哪里出错了。
附注请改用 innerHeight/clientHeight。

【解决方案2】：

如果你有 Fx4，一个简单的height: -moz-calc(100%-100px) 会产生奇迹。可惜 CSS3 这么晚才引入和支持此功能。

【讨论】：

我有 fx4，不幸的是我需要让它尽可能跨浏览器兼容。 >_

【解决方案3】：

如果 100 像素的顶部用于导航 iframe 的选项卡，则可能有一种解决方法。只需将您的 iframe 填充到 100% 的高度，然后将这些选项卡 inside 作为另一个具有固定大小的 iframe。或者只是求助于框架集。

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

【讨论】：