CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Raghav
Raghav

Reputation: 9630

How to make a fixed div inside iframe

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

Upvotes: 2

Views: 11494

Answers (4)

Luke Brown
Luke Brown

Reputation: 1892

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.

Upvotes: -1

AWolf
AWolf

Reputation: 8970

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

Upvotes: 1

step
step

Reputation: 186

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

Upvotes: 2

Radio
Radio

Reputation: 2853

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

Upvotes: 0

Related Questions