facebook评论插件高度

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

如何限制身高？

这是我正在使用的代码。

<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

来源

2013-05-09 Sowmya

显示你有除了图像边框上的任何网页上的造型？

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

你可以尝试包装插件在一个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; }

我发现它在这个答案：Limit size of HTML5 Facebook comment box

enter image description here

来源

2013-05-09 09:28:51 codewaggle

雅我给同一个班级划分了边界。即使你的身高解决方案也不起作用。在这里检查http://jsfiddle.net/K3CBU/ – Sowmya 2013-05-09 09:30:19

我分叉你的小提琴，看到我更新的答案。 – codewaggle 2013-05-09 10:25:32

我忘了保存它，现在用我添加的代码进行更新。 – codewaggle 2013-05-09 10:35:57

facebook评论插件高度

回答

相关问题