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.
来源：https://stackoverflow.com/questions/29290272/fix-the-div-inside-iframe-at-bottom-of-ipad