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/

enter image description here

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.

enter image description here

I think that your code behaves equal for both cases, however in iframe seems not because your text it's not large enough for the width and height you specify on it through `style`. — albciff, Mar 26 '15 at 21:44

score 2 · Answer 1 · answered Mar 26 '15 at 21:50

2

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;
}

answered Mar 26 '15 at 21:50

step

186
7

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

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%;
}

edited May 23 '17 at 12:32

Community

1
1

answered Mar 26 '15 at 21:59

AWolf

8,770
5
33
39

I am having issues with this while viewing it in iPad. Posted here http://stackoverflow.com/questions/29290272/fix-the-div-inside-iframe-at-bottom-of-ipad – Raghav Mar 26 '15 at 22:48
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](http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-iphone). Maybe it helps. – AWolf Mar 26 '15 at 23:08

score 0 · Answer 3 · answered Mar 26 '15 at 21:45

0

The caveat is that the child iframe and parent iframe must be from the same domain. You'll need some JavaScript. I created a working fiddle.

https://fiddle.jshell.net/zmr0m5qv/

var newNode = document.createElement('div');  
newNode.style.bottom = 0;
newNode.style.height ="25px";
newNode.style.left = 0;
newNode.style.position = "fixed";
newNode.style.right = 0;
newNode.style["z-index"] = 100;
newNode.style["background-color"] = "yellow";
newNode.innerHTML = "sticky Text";
parent.document.body.appendChild( newNode );

answered Mar 26 '15 at 21:45

Radio

2,810
1
21
43

It seems I misunderstood the problem perhaps. Sorry! – Radio Mar 26 '15 at 21:48
You could use the same solution to target the appendChild to the same div holding the iframe. – Radio Mar 26 '15 at 21:49

score -1 · Answer 4 · answered Mar 26 '15 at 22:06

Following the guide I made on CodePen you can simple apply that to this question. Using no Javascript to keep this simple, becasue it can all be handled by CSS.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
.footer {
    height: 40px;
}
.push {
    height: 80px;
}

In The original content, the footer will remain at the bottom of the page no matter how much content is there. That applies for if there isn't enough content from #content to fit the .sticky element to the bottom.

Now to apply this on the iFrame page, you simple need to inlcude the CSS to position the iFrame full hight. As seen here: http://fiddle.jshell.net/8ghsm1La/4.

html, body, iframe {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    border: 0;
    margin: 0;
}

Not entirely sure what purpose the iFrame servers and I would recommend using PHP include() or JavaScript's AJAX functionality to load the content rather than trying to apply CSS in multiple places.

Hope this help. let me know if you have any issues.

@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. — Luke Brown, Mar 26 '15 at 22:56

How to make a fixed div inside iframe

4 Answers4