Javascript 如何使 facebook 评论框宽度为 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10862256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make facebook comment box width 100%?
提问by medo ampir
i am using this code to put a facebook comment box to my page,
我正在使用此代码在我的页面上放置一个 facebook 评论框，
<script type="text/javascript">
(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&appId=397337283630353";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="https://apps.facebook.com/driftee/" data-num-posts="5" data-width="470" data-colorscheme="dark" style="width: 100% !important;"></div>
but i cannot make the comment box fill 100% of the page.
但我不能让评论框填满页面的 100%。
采纳答案by medo ampir
well i think i managed to solve it, i analysed the comment box and saw that the fb-comments div is containing a span with the width of 470px by default, and inside this span i found an iframe of the same width, so the solution is to change the span and iframe width on window resize using jquery like this:
好吧，我想我设法解决了它，我分析了评论框，看到 fb-comments div 默认包含一个宽度为 470px 的跨度，在这个跨度内我找到了一个相同宽度的 iframe，所以解决方案是使用 jquery 更改窗口大小时的跨度和 iframe 宽度，如下所示：
$(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});});
so now on window resize the whole comment box is taking the container width (by other means it is 100% width).
所以现在在窗口调整大小时，整个评论框采用容器宽度（通过其他方式，它是 100% 宽度）。
回答by zeeshan ansari
You can do this by adding CSS class in style sheet of your HTML page as:
您可以通过在 HTML 页面的样式表中添加 CSS 类来做到这一点：
.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }
回答by EKY
zeeshan your solution seems outdated and it looks like facebook updated their plugin and that broke the style.
zeeshan 您的解决方案似乎已经过时，看起来 facebook 更新了他们的插件并且打破了风格。
Probably this works better for me as of now and I believe that this style will again broke when facebook update the way their plugins work.
到目前为止，这可能对我来说效果更好，我相信当 facebook 更新其插件的工作方式时，这种风格会再次崩溃。
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}
I encourage other contributors to add the more recent solution to this question when time comes.
我鼓励其他贡献者在时机成熟时为这个问题添加最新的解决方案。
回答by Ivan Nicolas Pimentel Navarro
I try the other solutions and none works for me.
我尝试了其他解决方案，但没有一个适合我。
Reading the fb documentation i found that width 100% is already supported adding the attribut data-width="100%" to the tag:
阅读 fb 文档我发现宽度 100% 已经支持添加属性 data-width="100%" 到标签：
<div class="fb-comments" data-width="100%" data-href="http://www.mintybolivia.com/" data-numposts="10" data-colorscheme="light"></div>
<div class="fb-comments" data-width="100%" data-href="http://www.mintybolivia.com/" data-numposts="10" data-colorscheme="light"></div>
It's working right now and according to it's documentation en mobile devices this setting is set automatically.
它现在正在工作，根据它的文档 en 移动设备，此设置是自动设置的。
回答by vxda
.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget iframe {
width: 100% !important;
}
This worked for me
这对我有用
回答by pashOCONNOR
With jQuery you can over-write the hard-coded width before it loads the Facebook comment box.
使用 jQuery，您可以在加载 Facebook 评论框之前覆盖硬编码宽度。
$('document').ready(function(){
$('.fb-comments').attr('data-width',$('body').width());
});
p.s. you can replace 'body' with any other element you want the comment box to match.
ps 您可以将“body”替换为您希望评论框匹配的任何其他元素。
回答by CBroe
Try adding the parameter data-width="{pixels}", as you're getting when you get the code created on this page, https://developers.facebook.com/docs/reference/plugins/comments/– that is, if you know the width of the page in pixels. I don't know, if it works with percentages as well, but somehow doubt it.
尝试添加参数data-width="{pixels}"，就像在此页面上创建代码时得到的一样，https://developers.facebook.com/docs/reference/plugins/comments/– 也就是说，如果您知道页面的宽度以像素为单位。我不知道，如果它也适用于百分比，但不知何故怀疑它。
Then your last option might be to add resp. modify that parameter dynamically once your page has loaded and you can read out the actuall width in pixels, and have XFBML only parsed afterwards (setting xfbml param to false while loading the script, and calling FB.XFBML.parseafter setting the data-width parameter). Of course, that still won't help you, if the width get's modified later by the user resizing the browser window or else …
那么你的最后一个选择可能是添加 resp。页面加载后动态修改该参数，您可以以像素为单位读出实际宽度，然后仅解析 XFBML（在加载脚本时将 xfbml 参数设置为 false，并在设置数据宽度后调用FB.XFBML.parse范围）。当然，如果用户稍后调整浏览器窗口大小或其他方式修改了宽度，那仍然无济于事。
回答by Yolda? YILMAZ
setTimeout(function run() {
if ($('.fb-comments span:first-child, .fb-comments span iframe').length == 0)
setTimeout(run, 1000);
else
$('.fb-comments span:first-child, .fb-comments span iframe')[1].style.width = "100%";
}, 1000);
回答by Patrick Waweru
This is fairly simpleOn your code
这相当简单在您的代码上
Addthe following piece of code data-width="100%"
添加如下一段代码data-width="100%"
<div class="fb-comments" data-href="{{ post.build_absolute_uri }}"data-width="100%" data-numposts="5"></div>