1

如果您将iframe放入div：

<div id="big-box">
    <iframe src="http://www.google.com" class="frame">
    </iframe>
</div>

并使用 CSS 要求 iframe 占据所有可用的屏幕区域：

#big-box {
    background-color: #aaf;
}

.frame {
    border: medium none;
    height: 100%;
    width: 100%;
}

它在 Chrome (12.07) 上完美运行，但在 Firefox (3.6.17) 上失败。此演示显示在 Chrome 中整个 JSFiddle 区域都包含iframe，但如果您在 Firefox 中尝试此示例，iframe将占据所有宽度，但不是所有高度。

另请注意，如果您为大盒子固定宽度和高度，它会起作用，但这不是重点（我无法更改）。关键是为什么这种不兼容以及如何修复它（总是像 Chrome 那样做）。

4

3 回答 3

2

最新版本的 Google Chrome (14.0.835) 显示小提琴的方式与最新版本的 Firefox (3.6.23) 和最新版本的 IE (9.0.3) 完全相同。所以你可以看到谷歌浏览器一开始就不应该“正确”地做到这一点。它错误地显示了您想要的内容...

添加position: absolute;到样式.frame将实现您的目标。它适用于所有三个提到的浏览器。

这是小提琴：jsfiddle.net/Q5mt5/1

于 2011-10-13T03:29:54.693 回答
1

取自Dennis的 jsFiddle 我想你可以这样做：

html, body
{
    width: 100%;
    height: 100%;
    padding:0px;
}
div {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

iframe {
    height: 100%;
    width: 100%;
}

jsfiddle在 Firefox 4 和 Chrome 14 中工作（抱歉，我的 atm 就只有这些了。）

于 2011-10-13T03:55:52.297 回答
0

火狐在这里是正确的。Aniframe默认情况下是内联替换元素，因此它位于基线上。如果您添加display: block;到框架类的样式中，那么它将遵守块大小规则并完全覆盖div.

于 2011-10-09T20:17:37.493 回答