Question

我试图在这个layout中放置一个Facebook社交插件<iframe>，但问题是这个<iframe>的内容，它不适应其父宽度。

这是<iframe>代码：

<iframe id="fb-page" src="https://www.facebook.com/plugins/page.php?
   href=https%3A%2F%2Fwww.facebook.com%2F505180683015806&tabs=timeline%2C%20messages&
   height=500&
   small_header=true&
   adapt_container_width=true&
   hide_cover=false&
   show_facepile=false" 
height="500" style="border:none;overflow:hidden;" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>

*代码改变只是为了更好地呈现PHP参数。

正如您所看到的，adapt_container_width设置为true，但无论页面加载时wrapper的大小如何都没有变化，如果传入参数或设置宽度，则始终获得宽度340px，这是Facebook的默认值。

测试内容：

将宽度值指定为PHP参数，导致内容具有绝对宽度，并且可能导致某些溢出内容被隐藏。
使用值指定宽度＆＃39; 0＆＃39;作为PHP参数，会生成宽度为0px的内容。
使用值指定宽度＆＃39; 100％25＆＃39;作为PHP参数，会产生一个空白框架。
在iframe元素上指定100％的宽度，不要更改内容宽度（通常为340px（Facebook默认值））或通过PHP参数定义的值。

您可以查看已经包含iframe代码和HTML布局的功能齐全的jsfiddle。

我的期望：

使<iframe>内容使用90％的父级内容的方法，而不是指定绝对宽度并杀死响应性。只需使用Facebook提供的<iframe>代码作为选项来呈现其内容。

提前致谢。

Answer 1

对我而言。我想出的唯一解决方案是：

.fb-likebox {
    max-width: 288px;
    overflow: hidden;
    width: 288px;
}

overflow:hidden至少没有让它看起来破碎，但是它确实隐藏在盒子里。

Facebook插件社交，iframe不适应其父级

测试内容：

我的期望：

提前致谢。

1 个答案: