Question

看看this link。向下滚动一下，您应该看到一个Facebook评论插件，其下方嵌入了Google地图。

我的问题是，评论插件的底部和地图的顶部之间有大量的空白区域。 Firebug表示空白区域位于评论插件的底部（与地图顶部相对）。但是，我似乎无法找到消除它的方法。

我尝试过使用相对CSS定位将地图向上移动50个像素，但如果碰巧有任何问题，它会位于评论之上。此外，如果用户关闭了FB注释，它也会固定布局。

关于如何摆脱过多的空白区域的任何想法？

更新：虽然这里提供的答案指出了我正确的方向，但最终却太麻烦了。我只是将Facebook评论放在页面底部的谷歌地图下面，这有点掩盖了这个问题。显然这是一个根据以下评论者之一的错误，所以我们只需等待修复。

编辑：一直玩弄这些风格，没有运气。我最初可以根据杰森的建议改变盒子的高度，但是我做的任何事情都搞砸了布局（由于评论区域与原始高度保持相同的高度，新评论出现在地图后面，而不是允许Facebook动态增长添加注释时其IFRAME元素的高度）。还有其他想法吗？

编辑＃2 ：似乎问题的根源是Facebook自动为包含评论框的IFRAME分配200px的高度。添加评论后，Facebook会动态调整IFRAME的大小到适当的高度。如果我能找到一种方法使默认的200px从145px开始，我就能解决我的问题。不确定这是否可能，或者为什么Facebook认为200（任意？）是一个很好的高度开始。

编辑＃3 ：我意识到白色空间来自Facebook生成的IFRAME，而且我无能为力，特别是。我开始对这个问题给予赏金，因为：

1）我发现很难相信我是唯一一个对显示方式有问题的人。

2）这可能是由于我配置的方式？

3）我还没有想到其他一些解决方法。

希望赏金会鼓励一些创意回复！

Answer 1

不要将高度设置为自动，设置溢出...

在Facebook iframe上设置高度：110px和overflow：auto - 然后注释将动态扩展iframe的高度。

在$（）。ready函数中弹出这些更改 - 这对我来说很好。

Answer 2

我在移动浏览器上遇到此问题。 Facebook为移动设备添加了此自动检测功能。它加载了一个充满bug的不同版本的插件。只需将mobile标志设置为false即可强制它使用没有bug的常规版本。这救了我。我希望它可以帮助你。

Answer 3

有几个因素：

.fbFeedbackContent有min-height: 165px
加载的iframe有height: 200px
span标记

fb:comment

解决任何或所有这些问题应该让你开始。您可能需要使用!important来覆盖某些CSS。

Answer 4

我遇到了同样的问题。额外的空白区域仅在没有评论时显示。所以你只需要执行以下操作：

1。）交换回旧标记，因为HTML5不支持步骤2）

2。）创建一个新的div #commentcount，您将在其中加载评论计数。您可以使用display:none;隐藏它。

3.。）将以下代码插入#commentcount：<fb:comments-count href=http://example.com/></fb:comments-count>，其中example.com是您评论的确切网址。在大多数情况下，这将是$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]（PHP），或其他语言中的相应HTTP标头变量。

4.。）将注释计数存储在JavaScript中的变量中。您可以轻松地获得计数，它位于#commentcount元素中的span div内。如果您对此不确定，请检查chrome dev工具或firebug，它将显示渲染的结构。（因为Facebook最终可能会改变它）

5.。）写一个不错的javascript代码来更新facebook评论容器div if(commentcount==0)。添加样式：height:110px; overflow:hidden;。

6。）频繁加载评论计数，如果有人评论，你可以删除隐藏的溢出和固定高度，他们可以看到新的评论。您可以使用setInterval()。

执行此操作

有效！

更简单的替代解决方案：如果您有一个背景颜色为style="background-color:#f5f5f5;"的网站，则可以为评论框设置F5F5F5。评论框颜色将混合到您的网站中。它看起来不错。

Answer 5

关闭移动参数。例如：

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

Answer 6

我通过设置高度来解决它。即时通讯使用wordpress中的facebook插件。你可以在第75行的/wp-content/plugins/facebook/social-plugins/comments.php下找到该文件或将其设置为css

#respond{
height: 112px;
}

Answer 7

我正在为 Wordpress 使用 FbComments插件，您可以在其中设置自定义选项。这解决了我的问题。

它要求评论框样式和整个评论框样式输入您想要的高度。它应该是72px。因此，您在提供的空白处输入 height：72px; 。不要忘记;

删除Facebook评论插件下方的空白区域

7 个答案: