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

你在iframe的某个地方有一个max-width: 100%会让你的事情变得混乱。

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

来覆盖

Answer 2

你必须使用JAVASCRIPT。例如：

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

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

iframe未在水平滚动Div

2 个答案: