Auto height in iframe?

Question

I have an iframe and I need its height to be automatic according to the content inside it. How can I do that? No jquery of preference.

Answer 1

Create a class and assign the property 'height:auto', if you wanted to limit a maximum size you can use max-height:''.

Html

<iframe class="frame"></iframe>

Css

.frame{height:auto;max-heignt:100px;}

Answer 2

You need to set in the body tag and html height value: 100%, follow example:

body, html {
  height:100%;
}

iframe {
  height:100%;
  width:100%;
  background:cyan;
}

<iframe></iframe

Answer 3

Unfortunately, you cannot leave iframe with automatic height according to content.

The only way to solve the problem is to implement a Javascript inside the iframe that sends the body height (from within the iframe) out of the iframe via postMessage. Receiving the height, you resize the iframe.

In the link below is an explanation of how to do this:

http://www.dyn-web.com/tutorials/iframes/postmessage/height/