我试图在这个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>
代码作为选项来呈现其内容。
答案 0 :(得分:0)
对我而言。我想出的唯一解决方案是:
.fb-likebox {
max-width: 288px;
overflow: hidden;
width: 288px;
}
overflow:hidden
至少没有让它看起来破碎,但是它确实隐藏在盒子里。