Facebook 页面嵌入 iframe 不会填充容器宽度

Question

我添加了维基百科的 iframe 来演示我遇到的问题。
Wiki iframe 像它想象的那样正确显示，但 facebook iframe 不是。

HTML：

   <div class="iframe-fb-container mt-4">
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   </div>

CSS：

.iframe-fb-container {
    border: 1px solid blue;
 }

 .iframe-fb {
    width: 100%;
    }

如您所见，我向 facebook 询问了一个宽度为450px的 iframe，并且在附加的图像中，模拟器的宽度为375px，但 fb iframe 仍然没有像维基百科 iframe 那样填充它的容器。

我怎样才能让 fb iframe 填充它的容器？

Answer 1

你不能以正常的方式做到 100%。

这是您的 iframe src：

https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>

请注意，有参数：width=450px.

它将 iframe 内容的宽度设置为 450px。

根据Facebook 插件文档：

The pixel width of the plugin. Min. is 180 & Max. is 500.

所以 Facebook 可以得到的最大宽度是 500。

Answer 2

请给 iframe 宽度 100%。:)

iframe{
  width: 100% !important  //important if not working without it..
}