刪除Facebook評論插件下方的空白處

看看this link。向下滾動一下，你會看到一個帶有嵌入式Google地圖的Facebook評論插件。刪除Facebook評論插件下方的空白處

我的問題是，評論插件的底部和地圖的頂部之間有很大的空白。 Firebug表示白色空間位於評論插件的底部（而不是地圖的頂部）。但是，我似乎無法找到消除它的方法。

我試着用相對的CSS定位將地圖向上移動50個像素，但是如果碰巧有任何的話，它會位於註釋的頂部。另外，如果用戶關閉了FB註釋，它也會將佈局擰緊。

關於如何擺脫過多的空白空間的任何想法？

UPDATE：雖然這裏提供的答案指出了我朝着正確的方向發展，但最終導致了太多麻煩。我只是簡單地將Facebook上的評論放在頁面底部的谷歌地圖下方，這樣可以在一定程度上掩蓋問題。顯然這是根據下面的一個評論者的錯誤，所以我們只需要等待修復。

編輯：一直在玩這些風格一段時間，沒有運氣。我可以根據Jason的建議最初改變盒子的高度，但是我做的任何事情都會使佈局變得麻木（評論區保持與原始高度相同的高度，而不是允許Facebook動態增長當添加評論時，其IFRAME元素的高度）。任何其他想法？

編輯＃2：問題的根源在於Facebook自動爲包含評論框的IFRAME分配200px的高度。當添加評論時，Facebook會動態調整IFRAME到合適的高度。如果我能找到一種方法使145px的默認200px開始，我將能夠解決我的問題。不確定這是否可能，或者Facebook爲什麼會認爲200（任意？）是一個很好的起點。

編輯＃3：我意識到白色空間來自Facebook生成的IFRAME，並且我沒有辦法做到這一點，特別是。我開始在這個問題上的賞金，因爲：

1）我覺得很難相信我是唯一一個有這方面問題的人。

2）這可能是由於我配置的東西？

3）還有一些其他解決方法我沒有想到。

希望賞金會鼓勵一些創意回覆！

來源

2011-06-21 Scott

高度不要設置爲auto，設置溢出...

設定的高度：110px和溢出：在Facebook上的iframe汽車 - 那麼評論將動態擴展iframe的高度。

在$（）。ready函數中彈出這些更改 - 這對我來說工作正常。

來源

2011-06-24 19:39:08 earcam

實際上在Firefox 3.6.11中調整大小有點滯後 – earcam

不會溢出：自動;只是簡單地導致滾動條出現而不是展開iframe？ – Sparky

@ Sparky672潛在的，但只有當外部塊級容器是固定的，所以在這種情況下沒有。如果它是固定的，那麼設置overflow：visible可能會導致內容在google map元素下流血。 overflow：滾動總是具有添加滾動條的效果，而（AFAIK）溢出：如果沒有其他限制，auto會自動將內容推下。然而http://www.w3schools.com/css/pr_pos_overflow.asp似乎與我所說的矛盾，但在我測試過的瀏覽器中似乎工作正常。 – earcam

有幾個影響因素：

.fbFeedbackContent有min-height: 165px
加載iframe具有height: 200px
存在fb:comment標籤

內的空span標籤解決任何或所有這些應該讓你開始。您可能需要使用!important來覆蓋某些CSS。

來源

2011-06-21 02:13:15

什麼將我覆蓋了iframe的高度，以便得到它儘管流動？我不一定要設置一個特定的高度。設置高度：130px！重要的效果很好，但只要添加了評論，它就會溢出框。 – Scott

'height：auto;' –

試過這個沒有運氣。它消除了空白區域，但只是在「Like」按鈕和評論框下方移動了空白區域。 .fbFeedbackContent { \t min-height：0！important; } iframe.fb_ltr { \t height：auto！important; } – Scott

-1

我正在使用FbComments插件對於Wordpress在那裏您可以設置自定義選項。這解決了我的問題。

它在哪裏詢問評論框樣式和整體評論框樣式輸入你想要的高度。它應該是72px。所以你輸入高度：72px;在提供的空間。別忘了;

來源

2011-09-11 23:19:21 arnav

感謝您的建議，但我不使用FbComments或Wordpress。 – Scott

我在移動瀏覽器上遇到了這個問題。 Facebook爲移動設備添加了這種自動檢測功能。它會加載不同版本的充滿bug的插件。只需將移動標誌設置爲false即可強制它使用沒有錯誤的常規版本。這救了我。我希望它能幫助你。

來源

2012-11-21 22:09:23

關閉手機參數。舉例：

<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10" mobile="false"></div>

來源

2013-05-06 09:05:51 user2354023

我患了同樣的問題。只有當沒有評論時纔會顯示額外的空白區域。所以，你只需簡單地做到以下幾點：

1）交換回舊的標記，因爲步驟2）不被HTML5

2.支持）創建一個新的div #commentcount，您將在其中加載評論數量。您可以用display:none;來隱藏它。

3.）將以下代碼插入#commentcount：<fb:comments-count href=http://example.com/></fb:comments-count>，其中example.com是您要評論的確切URL。在大多數情況下，這將是$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]（PHP）或其他語言的適當HTTP頭變量。

4.）將評論計數存儲在JavaScript中的變量中。你可以很容易地達到計數，它位於span元素中的#commentcount格內。如果您不確定這一點，請檢查chrome開發工具或螢火蟲，它會顯示渲染結構。（因爲Facebook最終可能會改變它）

5。）編寫一個很好的JavaScript代碼來更新Facebook評論容器div if(commentcount==0)。添加樣式：height:110px; overflow:hidden;。

6.）經常加載評論數，所以如果有人評論，你可以刪除隱藏的溢出和固定的高度，他們可以看到新的評論。你可以使用setInterval()來做到這一點。

它的工作原理！

一個更簡單的替代解決方案：如果您有例如具有F5F5F5背景色的站點，您可以將style="background-color:#f5f5f5;"設置爲評論框。評論框顏色將融入您的網站。看起來很好。

來源

2013-07-28 10:18:16

我解決了它通過設置的高度。即時通訊在WordPress中使用Facebook插件。你可以找到下/wp-content/plugins/facebook/social-plugins/comments.php該文件，管線75或將其設置爲CSS

#respond{ 
height: 112px; 
}

來源

2014-01-06 08:50:14

然後當有多個評論和框需要高度大於112px時，你會怎麼做？ – jbx

你可以使它最小高度 –

是的，但問題再次返回，因爲Facebook的高度是錯誤的。 – jbx

刪除Facebook評論插件下方的空白處

回答

相關問題