修复iPad底部的iframe内的div

Question

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

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

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

但在iPad上，文本并不适合iframe内容。以下是它在iPad

中的显示方式

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

Answer 1

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

（这里有一个相关的stackoverflow：iframe size with CSS on iOS）

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