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評論插件高度

回答

相關問題