What determines an iframe's width and height?

Question

and how do I automate it? I want it to expand width/height to the content that it holds.

For example in this fiddle it looks to randomly make a box that is 300px by 200px.

http://jsfiddle.net/fyaAR/

But the content is actually about 10 pages or 8.5 inches by (11*10) inches. A page is 8.5 by 11 inches. I know that I can set the dimensions by simply setting them in the CSS but I want them to adjust to whatever content the iframe holds, that is the content is dynamic.

Fiddle code:

<div id="community">
  <div id = "community_outer"></div>
  <div id = "community_cover"></div>
  <iframe scrolling="no" id="community_frame" src="https://docs.google.com/document/d/1n9bsHIBk1KxGQTKgUF-NG6FRhb4LP0OHfmd4I50CFCU/pub" ></iframe>
</div>

Answer 1

I've encountered this MANY of times trying to easily insert APIs and whatnot externally.

It's not as simple as one would imagine. The whole reason for iFrames is to avoid security-laden AJAX calls and to display remote content.

Because of this, your document will not have the css properties of that document taken into account, so trying to make your page render it full-scale is less than easy.

---

I would suggest reading into the comments, and the post described below:

Link to question 9162933

Looks like you're going to have to use a script.

---

Copied Most Relevant Answer @Aristos

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>   

Then HTML

<iframe id="idIframe" onload="iframeLoaded()" ...

---

I've always had problems with this personally, so my final solution was to avoid iFrames, but you could perhaps make this work.

Perhaps use one of Google's available APIs?

http://code.google.com/apis/ajax/playground/#news_show_via_iframe