修復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

問題是移動瀏覽器如何呈現iframe。 它不尊重height屬性，而是根據內容的高度設置iframe的高度。 就個人而言，當您考慮一下早期版本的IOS如何處理溢出滾動（兩指滾動）時，這很有道理-想象一下一個iframe還包含一個可滾動元素！

（此處有一個相關的stackoverflow： iOS上帶有CSS的iframe大小 ）

無論如何，您的“固定”頁腳是固定的-僅在非常大的iframe的底部。