Question

我遇到了iframe和Firefox的问题。基本上，我将一个IFrame嵌入到一个站点中，因为它占据了整个身体区域。如您所见，它与Google Chrome完美配合。 I帧占据了所有的身体区域，没有导航iframe所需的滚动条。

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

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

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

所以我想知道如何才能让它发挥作用？我搜索和搜索了所有我尝试的解决方案都没有用。

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

http://pastebin.com/rmdcnLuw

感谢您的帮助！

Answer 1

您需要将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>

Answer 2

在你的css中试试这个：

iframe { display:block; width:100%; border:none;}

在Firefox中全尺寸IFrame？

2 个答案: