Search code examples
htmlcssiframeheight

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/

Solution

  • 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.