修复iPad底部iframe中的div [英] Fix the div inside iframe at bottom of iPad

问题描述

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

在桌面上，黄色条在底部显示，没有任何问题：
）

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

I have a page with a fixed div which is displayed at bottom of screen. When I put that page in iframe it has no issues while viewing in desktop

On desktop the yellow bar is coming at bottom without any issues: https://jsfiddle.net/x1p4bf7j/12/

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

but on iPad it doesn't the text just doesn't fit inside iframe. Below is the text how it is displayed in iPad

As you can see in the image there is no sticky footer coming. I want that to be at the bottom of my iPad.

解决方案

The issue is how mobile safari renders iframes. It doesn't respect a height attribute, preferring to set the height of your iframe based on the height of your content. Personally, it makes sense when you think about how earlier versions of IOS handled overflowed scrolling (two finger scrolling) - Imagine an iframe that ALSO contained a scrollable element!

(A related stackoverflow here: iframe size with CSS on iOS)

Anyway, your "fixed" footer IS fixed - just at the bottom of a very large iframe.

这篇关于修复iPad底部iframe中的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！