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

Question

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

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

Answer 1

<iframe>“没有响应”：

我有似乎是响应式<iframe> 代码。请参阅 Codepen 上的 this Pen。 （注意：Pen 中使用的嵌入站点是视差站点。虽然<iframe> 具有响应性，但在移动设备尺寸下会丢失视差功能。非视差站点似乎可以正常工作。试试 href="@987654322 @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> 开始标记中指定 no 属性，特别是 not height 和 宽度。
• 将<iframe> 包裹在内部<div> 和外部<div> 中。
• 使用 style="-webkit-overflow-scrolling: touch; overflow: auto" 为内部 <div> 内联设置样式，这是在移动设备上正确滚动和溢出处理所必需的，但不稳定在 CSS 中。 （我在第四篇文章中找到了这个；我没有保存参考资料，也找不到了。）

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

我希望这会有所帮助。