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

【问题标题】：Iframe not loading fully within horizontal scrolling Diviframe 未在水平滚动 Div 中完全加载
【发布时间】：2015-05-21 20:41:58
【问题描述】：

我正在尝试在水平滚动 div 中放置一个 iframe，以便用户可以滚动查看 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

【问题讨论】：

您的 iframe 似乎跨越了 div 的整个宽度，请在此处查看：output.jsbin.com/qenego。您的问题是否与任何特定浏览器有关？
这很奇怪，因为它在您的链接上有效，我想这可能是因为我正在尝试实现此目的的网站上使用 wordpress？
你有我可以检查代码的实时链接吗？如果没有，请确保在 iframe 的任何父元素（包括 body 和 html 元素）上没有任何 overflow: hidden 规则。
你在那个 iframe 上有一个max-width: 100%，它把你的事情搞砸了。这是一个屏幕截图：dropbox.com/s/xc6xhlappx8i3ys/… 尝试删除它，或者将其设置为默认值 max-width: 0
谢谢你已经完成了！你想把它作为答案提交，以便我投票吗？

标签： html css iframe widget horizontal-scrolling

【解决方案1】：

你有一个max-width: 100% 在那个 iframe 的某个地方，它把你的事情搞砸了。

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

【讨论】：

我删除了 max-width: 100%;来自 framework.css，适用于 WP 上以后遇到相同问题的任何人

【解决方案2】：

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

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

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

【讨论】：