I want to make a float div at bottom of the window. It is working fine as displayed here /

The issue I am getting is when I place that html inside iframe. The sticky div is ing 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 /

<iframe id="if1" src="/" style="width: 1310px; height: 582px; overflow: hidden;" />

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

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

The issue I am getting is when I place that html inside iframe. The sticky div is ing 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/x1p4bf7j/

<iframe id="if1" src="https://fiddle.jshell/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.

• javascript
• jquery
• html
• css
• iframe

• 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 Commented Mar 26, 2015 at 21:44

4 Answers 4

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

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

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/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 );

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/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 remend 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.