title: Auto height content in an iframe (CORS?)
body: <p>I am working with a client.  Their webpage is using this DOCTYPE</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p>I need to deliver content to pages on their site.  My content looks like this </p>
  
  <pre><code>    &lt;div style="height:1000px"&gt;
      &lt;iframe frameborder="0" src="..." width="550" height="220"&gt;&lt;/iframe&gt;
      &lt;br/&gt;
      &lt;br/&gt;
      &lt;iframe frameborder="0" src="..." width="550" height="220"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I can place the content on the clients page by giving them a couple of lines of css, and, currently, and iframe:</p>
  
  <pre><code>&lt;style&gt;
  .iframecontent
  {
      background-color:blue;
      position: relative;
  height: 100%;
  width: 100%
  }
  &lt;/style&gt;
  
  &lt;iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"&gt; &lt;/iframe&gt;
  </code></pre>
  
  <p>Because the height of the content is dynamic, I cannot provide a specific height to the client - instead I need it to stretch.</p>
  
  <p>I've read many posts, but am still not sure of the best way to do this.  Possibly CORS?  Something else?</p>
  
  <p>Here is one solution offered: <a href="http://sly777.github.com/Iframe-Height-Jquery-Plugin/" rel="nofollow">http://sly777.github.com/Iframe-Height-Jquery-Plugin/</a> - it works on the same domain, but for cross-domain talk it relies on PostMessage which is an HTML 5 thing.</p>
  
  <p>I've tried <a href="http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/" rel="nofollow">http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/</a> but have not be able to get it to work.</p>
  
  <p>I might just get the client to set the frame to 1500px so that it should fit whatever I choose to be in the content and be done with it, but is there a better way?</p>