Question

我在我的网页上使用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>

这就是它现在的表现

enter image description here

DEMO

Answer 1

除了图像上的边框外，页面上是否有任何样式？

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

您可以尝试将插件包装在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>

你的小提琴并没有显示出任何东西。我分叉了它似乎工作，虽然我没有任何评论要显示。这是小提琴链接：
http://jsfiddle.net/CodeWaggle/JHzjG/

另一种方法是添加这种风格：

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

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

enter image description here

facebook评论插件高度

1 个答案: