iframe 未在水平滚动中完全加载 Div

Question

我正在尝试将 iframe 放在水平滚动 div 中，以便用户可以滚动查看 Instagram 帖子。我遇到的问题是当页面加载时它会切断大于 div 的内容。如何在不剪切任何 iframe 内容的情况下在 div 中加载整个 iframe，以便用户可以滚动？

#scroll {
  width:100%;
  height:700px;
  margin:0px auto;
  background:#A3CBE0;
  overflow:auto;
  white-space:nowrap;
  box-shadow:0 0 10px #000;
}

<div id="scroll">
  <iframe src="http://snapwidget.com/bd/?h=anVpY2V8aW58MjAwfDEyfDJ8fHllc3w4fG5vbmV8b25TdGFydHxub3xubw==&ve=170515" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="yes" style="border:none; overflow:hidden; width:2520px; height:670px"></iframe>
  <div style="height:1px;width:2520px; background-color:#A3CBE0;">
  </div>
</div>

这是问题的样子http://i.imgur.com/ynjzuXB.jpg

Answer 1

为此你必须使用 JAVASCRIPT。示例：

yourIframeId.height = yourIframeId.contentWindow.document.body.scrollHeight + "px";

这将根据其内容相应地设置 iframe 的高度。更改包裹它的 div 的相同过程。

Answer 2

您的 iframe 某处有一个 max-width: 100%，它把您的事情搞砸了。

尝试将其删除，或者通过将其设置为默认值来覆盖 max-width: 0

iframe 未在水平滚动中完全加载 Div

Iframe not loading fully within horizontal scrolling Div

html

css

iframe

widget

horizontal-scrolling