Facebook IFrame自动调整大小仍然包括滚动条

Question

我一直试图解决这个问题，但我没有运气。我有一个Facebook应用程序（witdh：510），包括滚动条。这是它在facebook中的样子：

我的应用程序中没有任何东西的宽度大于510，所以我很困惑为什么首先有空白区域。我也不明白为什么有一个垂直滚动条，因为页面上有足够的空间来容纳应用程序。

在我的应用设置中调用自动调整大小，我的FB.Canvas.setAutoResize();功能中有window.fbAsyncInit。我也尝试过使用CSS重置<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">，但这并不能解决问题。

有什么建议吗？

Answer 1

如果您确定iFrame的尺寸始终会显示内容，那么您可以设置：

<iframe src="yourpage.htm" scrolling="no"></iframe>

scrolling =“no”会强制iFrame不显示滚动条，即使内容大于框架。

这应该是一个不显示滚动条的可靠方法，但应谨慎使用，你应该知道内容可能最终被隐藏，没有明显的方式让用户滚动到它，如果它超出了界限iFrame。

- 编辑 -

由于你显然不能在Facebook上设置它，你应该简单地将你正在加载的页面包装在一个包装div中并在那里设置高度，宽度和溢出属性。

<div class="wrap" style="height:500px;  width:510px;  overflow:hidden;">
  your page content here
</div>

您可以使用 overflow：hidden; 表示没有滚动条，或者 overflow-x：hidden; 只能隐藏水平滚动条，或 overflow-y：隐藏; 仅隐藏垂直滚动条。

Answer 2

首先，我会检查我的iframe HTML，例如“firebug”，你检查所有的div并验证firebug左侧的“布局”标签..你会看到你元素的大小，你的边框，填充边距所以，检查一切是否正确。

现在发生在我身上的事情是，来自facebook的“自动调整大小”在某些浏览器上无法正常工作，因此它错误地计算了高度，并且你的右侧仍然有一个滚动条，所以由于这个滚动条，你的内容变得太大，你也得到一个水平滚动条。

我的解决方法是自己指定iframe的高度而不使用自动调整大小的东西，这是执行此操作的代码（在结束</body>之前放在页面末尾）：

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {

    FB.init({appId: '{{fbapp_id}}', status: true, cookie: true,xfbml: true});

    window.setTimeout(function() {
        FB.Canvas.setSize({height:900});
    }, 250);

  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

这里我选择的高度是“900”，但您必须设置自己的高度（iframe内容的高度+一些安全边距，如50px左右）

此外，您必须使用真实的Facebook应用程序ID替换{{fbapp_id}}。

我希望这会有所帮助。

Answer 3

首先，删除填充＆am​​p;来自身体的边缘通过css

body {
 padding:0;
 margin:0;
}

将您的内容放在div中，将宽度设置为520（如果您仍然获得滚动条，则溢出：隐藏）。在这个DIV上带有填充和边框的carfull（详见http://www.w3.org/TR/CSS2/box.html）

当你有很长的内容时，它也有助于为这个div设置一个最小高度。有时你得到垂直滚动条，这反过来导致水平滚动条。

在页面的末尾，正好在结束机构设置

FB.Canvas.setSize()

还要确保在您的应用设置中，您有“自动高度”（或其调用方式），而不是滚动条。