类facebook盒流高度

如何单独控制类似facebook的框流部分高度。降低整个盒子的高度是正常的，但若试图控制它，则不会显示风扇图像

css

.fan\u box.page\u stream{…，宽度：300px}

到

.fan\u box.page\u stream{…，宽度：150px}

---

我这样问是因为iframe中的流框无法更改高度。Facebook没有提供更改高度的方法，也没有使用JavaScript和CSS更改高度的方法

为什么我不能用JavaScript和CSS来实现呢？ CSS并不通过iFrame应用，因为iFrame就是这样工作的——它基本上是一个窗口，指向另一个有自己CSS的页面

如果iFrame的URL与包含iFrame的页面不同，Javascript将不允许您访问iFrame的内容。做：

document.getElementById('iframeID').contentWindow.document

将在Chrome中向您发出以下警告

Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.

---

这样做的原因是为了防止XSS。以下是有关的详细信息。

我在Like Box页面上看到了这一点，我想我的回答是，您可以使用“数据高度”属性：

data-height="250"

为我工作。下面是我的例子：

---

您可以降低包围div的高度，隐藏其溢出部分，如果您想将其顶部推到绝对定位的具有较高z索引的元素下方，如下所示：

<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
    facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>

类似facebook的方框出现在这里——如果你将粉色方框变成白色，去掉0.5的不透明度，那么只有绿色部分才可见，底部将被切断，这样你就可以显示你想要的任何部分

---

调整此代码中的

高度

，以使其最适合您。

我想你们仍然需要它，这是我能提供的最精确的技巧，而且它也有望与facebook每天都在更换类似facebook的盒子一起工作

这有点棘手，但对你们来说很有用

在同一页上创建两个seprate-like框，并在我的示例中在seprate div中关闭它们

<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code

在up2中

.up2 {
    padding-top:87px;
    }

---

它所做的将把盒子1放在盒子2上，隐藏它的脸书式和布拉布拉式，让它感觉你有一个盒子，里面有你想要的长度的图片和流媒体

我四处看看，因为我遇到了这样的问题。如果检查了面和标题，Facebook没有定制流的标准方法

解决办法是以不同的方式对待它们。如果您需要1000像素长的流，只需取消选中除流之外的所有项。这会将其高度从默认的300px更改为您在“高度”字段中键入的任何值

请参见下面的示例：

<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>

然后，如果你仍然需要一个有脸的，得到一个新的代码，并设置不同的高度，然后取消选中其他。以下是一个例子：

<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

不要忘记在这些代码之前添加SDK

---

我知道这篇文章发布已经有很长时间了，但今天有一个解决方案帮助我

是的，数据高度为250将起作用，因为它减少了外部iframe

现在尝试将数据高度设置为1000-它仍然是300px高度

因为iframe内部的内部div硬编码为300px和

---

您无法控制它，因为它是跨域iframe…

您是否曾经得到过这个问题的答案，我仍在寻找解决方案。尝试了jQuery，但它无法工作，因为它位于iframe中。尝试将具有高度的css参数传递给元素，因为其他一些fb:元素具有此功能，但运气不佳。这只能缩短数据高度。最大数据高度似乎在300像素左右。

<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>

<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>