5

我在使用 iframe 和 Firefox 时遇到问题。基本上，我将一个 IFrame 嵌入到一个站点中，因为它占据了整个身体区域。如您在此处所见，它与 Google chrome 完美配合。I-frame 占据了所有的正文区域，导航 iframe 不需要滚动条。

铬：http: //i.stack.imgur.com/muo3U.png

但是在 Firefox 中它不能正常工作。正如您在此处看到的，只有 iframe 的一部分是可见的，并且滚动条（它们是不可见的，但滚动有效）必须用于导航 iframe。对于我的网站而言，这非常没有吸引力。

火狐：http: //i.stack.imgur.com/6Vm1O.png

所以我想知道我怎样才能让它工作？我已经搜索和搜索，我尝试的所有解决方案最终都不起作用。

这是我的代码和我尝试过的其他代码。

http://pastebin.com/rmdcnLuw

谢谢你的帮助！

4

2 回答 2

8

您需要将您的body和html元素设置为height: 100%

尝试这样的事情：

<html style="height: 100%">
<body style="height: 100%">
    <div style="width:100%; height:100%; background-color:transparent;">
    <iframe src="http://www.google.com/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
  </div>
</body>
</html>

更好的是，将这些规则添加到您的 CSS 文件中，如下所示：

body, html { height: 100%; }

你也可以试试这个：

CSS：

html, body { height: 100%; }
iframe { width: 100%; height: 100%; }

HTML：

<html>
<body>
      <iframe src="http://www.google.com" frameborder="0" scrolling="no"></iframe>
</body>
</html>

将 frameborder 和滚动到 CSS 的替代方法

border: none;删除 iframe 上的边框，同时overflow: hidden;禁用滚动并隐藏切断页面的任何内容（如您的原始代码）。

CSS：

html, body { height: 100%; overflow: hidden; }
iframe { width: 100%; height: 100%; border: none; overflow: hidden; }

HTML：

<html>
<body>
      <iframe src="http://en.wikipedia.org"></iframe>
</body>
</html>
于 2013-02-09T05:41:25.817 回答
1

在你的 CSS 中试试这个：

iframe { display:block; width:100%; border:none;}
于 2013-02-09T05:36:15.203 回答