修复 iPad 底部 iframe 内的 div

Posted 2023-03-12

【中文标题】修复 iPad 底部 iframe 内的 div

【英文标题】：Fix the div inside iframe at bottom of iPad

【发布时间】：2015-03-26 22:48:01

【问题描述】：

我有一个带有固定 div 的页面，它显示在屏幕底部。当我将该页面放入 iframe 时，在桌面查看时没有问题

在桌面上，黄色条位于底部，没有任何问题： https://jsfiddle.net/x1p4bf7j/12/

<iframe id="if1" src="https://fiddle.jshell.net/8ghsm1La/show/light/"  />

但在 iPad 上，文本并非不适合 iframe。下面是它在iPad中如何显示的文字

正如您在图像中看到的那样，没有粘性页脚出现。我希望它位于 iPad 的底部。

【参考方案1】：

问题在于移动 Safari 如何呈现 iframe。它不尊重高度属性，而是更喜欢根据内容的高度设置 iframe 的高度。就个人而言，当您考虑早期版本的 ios 如何处理溢出滚动（两指滚动）时，这是有道理的 - 想象一个还包含可滚动元素的 iframe！

（此处是相关的 ***：iframe size with CSS on iOS）

无论如何，您的“固定”页脚是固定的 - 就在一个非常大的 iframe 的底部。

【讨论】：

杰克，我跟着你提到的帖子来到了这个jsfiddle.net/x1p4bf7j/15我面临同样的问题。粘性 div 仍然没有出现在 iPad 屏幕的底部。我必须滚动到 iframe 底部才能查看粘性 div。

嗨@RaghavKhunger - 不幸的是，只要粘性div 包含在您的页脚中，问题仍然存在。外部 div 解决方法仅允许您将“溢出”应用于 iframe。 iframe 的高度仍然是 100%，因此 fixed 页脚将继续在 iPad 上表现得“古怪”。