我正在尝试放置一个 Facebook 社交插件 <iframe>
在这个layout , 但问题是这个 <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 参数,导致内容具有绝对宽度,并可能导致 Conceal 一些溢出内容。
将值为“0”的宽度指定为 PHP 参数,生成宽度为 0px 的内容。
将值为“100%25”的宽度指定为 PHP 参数,结果为空白帧。
在 iframe 元素上指定宽度为 100%,不要更改始终为 340px(Facebook 默认值)或通过 PHP 参数定义的值的内容宽度。
您可以使用这个功能齐全的 jsfiddle 查看,已经包含 iframe 代码和 HTML 布局。
我的期望:
制作<iframe>
的方法内容使用其父级的 90%,而不是指定绝对宽度并终止响应。只需使用 <iframe>
Facebook 提供的代码作为呈现其内容的选项。
提前致谢
最佳答案
我也一样。我想到的唯一解决方案是:
.fb-likebox {
max-width: 288px;
overflow: hidden;
width: 288px;
}
使用 overflow:hidden
至少不会让它看起来破损,但是它确实 Conceal 在盒子里。
关于html - Facebook 插件社交,iframe 不适应其父级的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40093144/