CODEWITHSUNDEEP
htmlcssiframeheight
Don P
Don P

Reputation: 63748

Embed an iframe in a div, and have div be full height of iframes document

I embed an iframe in a div. How can I make that container div be the full height of the iframe's document?

<div>
  <iframe width=100% height=100% frameborder=0 src='https://www.graf.ly/dashboards/111?embed=1'></iframe>
</div>

http://jsfiddle.net/3e794/

Upvotes: 0

Views: 3435

Answers (3)

Lyusten Elder
Lyusten Elder

Reputation: 3303

  <div id="content1"></div>
<script>
document.getElementById("content1").innerHTML='<object type="text/html" data="header.php" ></object>';
</script>

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

First you will need the iframe to be full document's height. There's a JQuery approach, or you can do it vanilla, but you can't test it on fiddler for iframe domain security issues.

var h = $("iframe").contents().find("html").height();
$("iframe").height(h);

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157404

You need to set the parent elements height to 100% as well...

html, body, div.wrap-frame {
    height: 100%;
}

Demo

If you wanna get rid of multiple scroll bars, use

iframe {
    display: block;
}

Because iframe results in white space at the bottom, hence adds few pixels to 100% which causes multiple vertical scroll...

Demo 2

Just a note, I used a class for the wrapper div element so that I don't have to use a general element selector / Type Selector.

Also, have an habit of quoting the attribute values.

Upvotes: 2

Related Questions