当内容扩展时，iframe不会将其下方的div推下来

Question

我使用的<iframe>没有响应，也没有将下方的div（页脚）推下来。您可以在以下位置查看该页面并使用开发工具检查代码： http://www.commercetools.com/en/positions/

我可以做些什么来修复它，或者它是iframe本身的一个问题，我无法解决并需要联系制作它的人？

Answer 1

<iframe>“没有响应”：

我的代码似乎是响应式<iframe>。请参阅Codepen上的this Pen。 （注意：Pen中使用的嵌入式站点是一个视差站点。虽然<iframe>具有响应性，但视差功能在移动大小时会丢失。非视差站点似乎运行正常。尝试 href =“ http://www.popularmechanics.com/space/a11137/secrets-of-the-water-bear-the-only-animal-that-can-survive-in-space-17069978/“作为示例。）

标记和CSS是从三个来源开发的：

1. 堆栈溢出线程Scaling iframes for responsive design CSS-only，
2. Ben Marshall文章How to Make Responsive Iframes — it’s easy!和
3. Rachel McCollin的文章Making Embedded Content Work In Responsive Design。

三个要点是：

• 在 src 以外的开头<iframe>标记中指定否属性，特别是不 高度和宽度。
• 将<iframe>包裹在内部<div>和外部<div>中。
• 使用 style =“ - webkit-overflow-scrolling：touch; overflow：auto”内联<div>内联样式，这是在移动设备上正确滚动和溢出处理所必需的在CSS中不稳定。 （我在第四篇文章中找到了这个;我没有保存参考文献，也找不到它。）

标记结构和CSS背后的基本原理可以在引用的资料中找到。

我希望这会有所帮助。