0

我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>

这就是它现在的表现

在此处输入图像描述

演示

4

1 回答 1

0

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

尝试使用您的浏览器开发工具（例如 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。我分叉了它，它似乎正在工作，尽管我没有任何评论要显示。这是小提琴链接：http:
//jsfiddle.net/CodeWaggle/JHzjG/

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

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

我在这个答案中找到了它：限制 HTML5 Facebook 评论框的大小

在此处输入图像描述

在此处输入图像描述

于 2013-05-09T09:28:51.587 回答