title: Iframe inside a DIV incompatibility Chrome-Firefox
body: <p>If you put an <em>iframe</em> inside a <em>div</em>:</p>
  
  <pre><code>&lt;div id="big-box"&gt;
      &lt;iframe src="http://www.google.com" class="frame"&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And use CSS to ask the iframe to occupy all the available screen area:</p>
  
  <pre><code>#big-box {
      background-color: #aaf;
  }
  
  .frame {
      border: medium none;
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <p>It works perfect on Chrome (12.07) but it fails on Firefox (3.6.17). <a href="http://jsfiddle.net/navi2000/4wevP/1/" rel="nofollow">This demo</a> shows that in Chrome the entire JSFiddle area contains the <em>iframe</em>, but if you try this sample in Firefox the <em>iframe</em> will occupy all width, but not all height.</p>
  
  <p>Note also that if you fix width and height for <em>big-box</em> it works, but this is not the point (I can't change this). The point is why this incompatibility and how to fix it (do always as Chrome does).</p>