How to make a fixed div inside iframe

Question

I want to make a float div at bottom of the window. It is working fine as displayed here https://fiddle.jshell.net/8ghsm1La/light/

The issue I am getting is when I place that html inside iframe. The sticky div is coming at bottom of iframe. In this case I want that to be at the bottom of my screen irrespective of where the iframe scroll is https://jsfiddle.net/x1p4bf7j/

<iframe id="if1" src="https://fiddle.jshell.net/8ghsm1La/show/light/" style="width: 1310px; height: 582px; overflow: hidden;" />

i.e I want fixed sticky div to be positioned at the bottom of container page.

Solution 1

I think you could place the div with css:

#iframe {
  position: fixed;
  width: 100%;
  height: 30px;
  margin: 0px !important;
  background-color: yellow;
  bottom: 0px;
  z-index: 1000;
}

Solution 2

You can use css to make the iframe as large as your body and then the sticky footer will work as expected.

See this jsFiddle.

I took the size styling from this SO question.

CSS:

body {
    margin:0px;
    padding:0px;
    overflow:hidden
}

#if1 {
    overflow:hidden;
    overflow-x:hidden;
    overflow y:hidden;
    height:100%;
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    height: 100%; 
    width: 100%;
}

Comments

[Radio]

It seems I misunderstood the problem perhaps. Sorry!

[Radio]

You could use the same solution to target the appendChild to the same div holding the iframe.

[Raghav]

I am having issues with this while viewing it in iPad. Posted here stackoverflow.com/questions/29290272/…

[Luke Brown]

@RaghavKhunger be sure to check that the iFrame you are loading in jsfiddle is served over HTTPS. This request has been blocked; the content must be served over HTTPS. You need to ensure your links start with https:// not http:// if you are using the secured version of jsfiddle.

[AWolf]

I don't have a iPad to test the issue. The issue is not in Safari on Windows. Probably just a mobile issue with iOS. I've tested my fiddle with Chrome in Android and it is working. Please have a look at this SO question. Maybe it helps.