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自動調整大小仍然包括滾動條

回答

相關問題