Facebook 帖子在桌面上嵌入 100% 宽度答案

【问题标题】：Facebook post embed 100% width on desktopFacebook 帖子在桌面上嵌入 100% 宽度
【发布时间】：2016-03-29 07:42:04
【问题描述】：

这似乎是一个常见问题，但我找不到直接答案。

我正在尝试将 Facebook 帖子嵌入到其父 div 的 100% 宽度。所有的解决方案似乎都是关于 Facebook cmets，而不是帖子嵌入功能。

我尝试将 data-width="100%" 和 width: 100% 添加到 iframe，但到目前为止没有任何效果。

感谢您的帮助。

【问题讨论】：

你能发个例子吗，一个sn-p会很好

标签： css facebook embed

【解决方案1】：

这对我有用：

iframe {
    position:fixed; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    right:0px; 
    width:100%; 
    height:100%; 
    border:none; 
    margin:0; 
    padding:0; 
    overflow:hidden;
}

【讨论】：

【解决方案2】：

将 iframe 的父容器设置为特定宽度：如果它相对于其他父容器的宽度，则为 100%。否则将其设置为 100vw 用于页面（视口）的整个宽度，或者将其设置为父容器以 px 为单位的某些特定宽度，或者您正在使用的任何内容。 .只有这样 iframe 才能占据其父级宽度的 100%。

.parent {
  margin: 0 auto;
  width: 500px;
  height: 900px;
  background: black;
}

iframe {
  width: 100%;
  height: 100%;
}

<div class="parent">
  <iframe src="http://www.w3schools.com"></iframe>
</div>

【讨论】：