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

我一直在试图解决这一段时间，但我没有运气。我有一个Facebook应用程序（witdh：510），其中包含滚动条。这是它在Facebook中的样子： Facebook App with white scroll bars Facebook IFrame自动调整大小仍然包括滚动条

我的应用程序中没有任何宽度超过510的宽度，所以我很困惑为什么在第一个地方有空白。我也不明白为什么有一个垂直滚动条，因为页面上显然有足够的空间来适应应用程序。

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

有什么建议吗？

来源

2011-04-21 Stanley Cup Phil

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

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

SCROLLING =“无”将迫使iFrame中不显示滚动条，甚至如果内容比框架大。

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

- 编辑 -

既然你显然不能设置在Facebook上，你只需换您加载一个包装DIV的页面，并设置高度，宽度和溢流性能那里。

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

您可以使用溢出：隐藏;没有滚动条的，或者overflow-x：hidden;仅用于隐藏水平滚动条，或者overflow-y：隐藏;仅用于隐藏垂直滚动条。

来源

2011-04-21 15:53:45

技术上是对的，但直到你是一个由facebook雇佣的开发者，你没有改变设置这个。 – Rufinus 2011-04-21 16:03:10

我测试了'overflow：hidden'，它确实有效，我只需要像这样做' ' – 2011-04-21 16:18:28

确保你在所有浏览器中都测试过，我不知道如何在HTML元素上设置样式会在浏览器中作出反应。 – 2011-04-21 16:22:59

首先，我会检查我的iframe HTML与类似“萤火虫”的东西，你检查所有的divs，并验证萤火虫左侧的“布局”选项卡..你会看到你的元素的大小，你的边框，填充保证金等，检查一切是否正确。

现在有些事情发生在我身上的是，从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中的内容的高度+一些安全余量像50像素左右）

你也有你的真正的Facebook应用程序，以取代{{fbapp_id}} ID。

我希望这会有所帮助。

来源

2011-04-22 08:48:39 dwarfy

第一，通过CSS清除体内填充&保证金

body { 
padding:0; 
margin:0; 
}

在其中将宽度设置为520一个div您的内容（如果你仍然得到滚动条，溢出：隐藏）。如果你有很长的内容，它也有助于设置一个min-height到这个DIV。有时你会得到垂直滚动条，这又会导致一个水平滚动条。

你的页面的最后

，对以前生产关闭体设置

FB.Canvas.setSize()

也确保，在您的应用程序设置，你有“自动高度”（或者其如何称呼），而不是滚动条。

来源

2011-04-27 20:44:58 Rufinus

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

回答

相关问题