同样的问题http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100
我尝试了所有答案，但它不再起作用了。看起来 Facebook 改变了一些东西。
【问题讨论】：
Facebook 在 .pluginSkinLight > div 上添加了另一个宽度 550 像素
将此添加到您的 CSS .pluginSkinLight > div {width: 100% !important;}
【讨论】：
这个 is 是一个 facebook 错误，请在此处查看：
https://developers.facebook.com/x/bugs/256568534516879/
唯一可用的解决方法就是使用 javascript。
稍后编辑：错误修复：您必须写：data-width="100%"
插件的宽度。像素值或文字 100% 流体宽度。评论插件的移动版本忽略了 宽度参数，而是具有 100% 的流体宽度。 https://developers.facebook.com/docs/plugins/comments
【讨论】：
我在此处发布了针对相同问题的解决方案：https://stackoverflow.com/a/22328835/2544386
问题在于，在 iframe 中，Facebook 可以更改 CSS、类、添加固定宽度等。 但是，如果您通过在 HTML 中的标签被 Facebook 解析之前以一种智能的方式使用 JS，我相信如果 Facebook 最终更改某些内容，它确实会减少它再次被破坏的机会。
【讨论】：
一个简单的 JS 解决方法
1) 将 id（本示例中为“fb_chat”）添加到 FB cmets div：
<div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>
2) 使用这个 JS 块（将 'chat_body' 替换为您的 cmets 父容器）：
<script type="text/javascript">
var fb_chat = document.getElementById('fb_chat');
var container_width = document.getElementById('chat_body').clientWidth * 0.985;
var attr = document.createAttribute('data-width');
attr.nodeValue = container_width.toString();
fb_chat.attributes.setNamedItem(attr);
</script>
【讨论】：
$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function () {
resizeiframe();
});
function resizeiframe() {
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $(".fb-comments").parent().width();
$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}
Jquery 解决方法，
来源：https://developers.facebook.com/x/bugs/256568534516879/ 评论者：Milap Bhojak
【讨论】：
facebook 更改了 fb-cmets 插件，现在您可以使用 data-width="100%"
您不需要任何样式或 js 代码。
<div class="fb-comments" data-href="http://example.com"
data-width="100%" data-numposts="5" data-colorscheme="light"></div>
【讨论】：
如果您正在寻找无需编程的最简单方法。没有并发症。
您只需像往常一样（使用 facebook 的代码框），然后在浏览器上打开 Inspect Element（右键单击页面上的任何元素并选择此选项）并单击喜欢框 <iframe></iframe> 并复制它在您的代码上（仅 iframe！）。它的工作方式与其他代码完全相同。
现在去掉iframe的宽度，或者在上面写width:100%。
就像这样：
<iframe name="f15e6cf8a8" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/yourentirepage" style="border:none;visibility:visible;height:541px" class=""></iframe>
对我来说很好用。
【讨论】：
添加 data-width="100%" 确实使 cmets 具有 100% 的宽度，但仍然不像您期望的那样完全流畅。它们将填充一个容器，但仅在加载时才会在调整窗口大小时调整大小。为此，请将其添加到您的 CSS：
.fb_iframe_widget_fluid span, iframe.fb_ltr {
width: 100% !important;
}
【讨论】：
参考https://developers.facebook.com/support/bugs/173395380238318/
Facebook 评论插件，他们不断更新新内容，但有时会导致新错误。
如此简单的 CSS 将解决宽度问题。
/*Fb Comments Width Fix*/
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
max-width: 100% !important;
width: 100% !important;
}
注意：确保使用 !important。如果没有重要，它将无法正常工作。
【讨论】：
为了解决这个问题，从<div class="fb-comments"... 中删除“数据宽度”
FB会自动放100%
或删除data-mobile="auto"
【讨论】：