Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript facebook评论插件高度_Javascript_Css_Facebook_Facebook Comments - Fatal编程技术网

Javascript facebook评论插件高度

Javascript facebook评论插件高度,javascript,css,facebook,facebook-comments,Javascript,Css,Facebook,Facebook Comments,我在我的页面上使用了Facebook评论插件,但问题是为什么它占据了整个浏览器的高度。我已经放置了一个图像,它应该出现在评论框的下方,但是图像位于页面的底部,因为评论框占据了整个浏览器 如何限制tat高度 这是我正在使用的代码 <html> <head> <title>Facebook Plugin Sample - Facebook Comments </title> <meta name="view

我在我的页面上使用了
Facebook评论
插件,但问题是为什么它占据了整个浏览器的高度。我已经放置了一个图像,它应该出现在评论框的下方,但是图像位于页面的底部,因为评论框占据了整个浏览器

如何限制tat高度

这是我正在使用的代码

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

Facebook插件示例-Facebook评论
(功能(d、s、id){
var js,fjs=d.getElementsByTagName[0];
if(d.getElementById(id))返回;
js=d.createElement;js.id=id;
js.src=“//connect.facebook.net/en_US/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js,fjs);
}(文档“脚本”、“facebook jssdk”);
这就是它现在的表现


除了图像的边框外,页面上还有其他样式吗

试着用你的浏览器开发工具查看它,比如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>
我在这个答案中找到了答案:


是的,我给同一个班级加了边界。甚至你的身高解决方案也不起作用。检查这里你没看到我小提琴上的图像?我刚刚看到了一个设计
fb comments
div样式的解决方案,我会把它添加到我的答案中,这样你就可以试试。是的,这个解决方案在桌面模式的评论中效果很好,但当我添加移动版本时,效果不太好。检查这个
#fb_comments { height:400px; padding-bottom:20px; overflow-y: scroll; }