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

时间:2016-10-17 18:21:54

标签: html css facebook

我试图在这个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>代码作为选项来呈现其内容。

提前致谢。

1 个答案:

答案 0 :(得分:0)

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

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

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