facebook评论插件高度答案

【问题标题】：facebook comment plugin heightfacebook评论插件高度
【发布时间】：2013-05-09 19:31:03
【问题描述】：

我在我的页面上使用Facebook comments 插件，但问题是为什么它占用了整个浏览器的高度。我放置了一张应该出现在评论框下方的图片，但由于评论框占据了整个浏览器，所以图片位于页面底部。

如何限制身高？？

这是我正在使用的代码。

<html>
    <head>
        <title>Facebook Plugin Sample - Facebook Comments </title>
        <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    </head>
    <body>
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-comments" data-href="http://example.com" data-mobile="true"></div>
        <img src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2009/02/toolbox-icon.jpg" style="border:1px #000 solid;" alt="" />
    </body>
</html>

这就是它现在的表现

DEMO

【问题讨论】：

标签： javascript css facebook facebook-comments

【解决方案1】：

除了图片的边框之外，页面上还有其他样式吗？

尝试使用您的浏览器开发工具（例如 Firefox 的 Firebug）查看它，并查看插件和图像的样式。

您可以尝试将插件包装在一个 div 中并设置该 div 的高度：

<head>
  <style>
    #comments_wrapper {
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="comments_wrapper">
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-comments" data-href="http://example.com" data-mobile="true"></div>
  </div>
</body>

你的小提琴没有显示 amything。我把它分叉了，它似乎正在工作，虽然我没有任何 cmets 可以显示。这是小提琴链接：
http://jsfiddle.net/CodeWaggle/JHzjG/

另一种方法是添加这种样式：

#fb_comments { height:400px; padding-bottom:20px; overflow-y: scroll; }

我在这个答案中找到了它：Limit size of HTML5 Facebook comment box

【讨论】：

是的，我给同一个班级设置了边框。即使您的身高解决方案也不起作用。在这里查看jsfiddle.net/K3CBU
你没有看到我的小提琴中的图像吗？我刚刚看到了一个设置fb-comments div 样式的解决方案，我会将其添加到我的答案中，以便您尝试一下。
是的，该解决方案适用于 cmets 的桌面模式，但是当我添加移动版本时，它无法正常工作。检查这个jsfiddle.net/JHzjG/2