title: How do I make an iframe 100% height of a containing div in Firefox?
body: <p>I'm having some trouble figuring out how to extend an iframe to 100% of it's container element in Firefox and IE (it works fine in Chrome). From searching around, it makes sense that there has to be a height specified on the containing div (and possibly body and html as well).  However, I have done that, and the iframe is still not extending. Do all of the parent divs have to have a specified height and position for this to work, or just the containing parent?  Any fix for this would be greatly appreciated!</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
           html, body {margin:0; padding:0; height:100%}
           #container {width: 1000px; min-height: 550px; position: relative}
           #smallContainer {position:relative} /*no height specified*/
           #iframeContainer {height: 100%; position: relative}
           #iframe {height: 100%; width: 100%; display: block}
  
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
              &lt;div id="smallContainer"&gt;
                  &lt;div id="iframeContainer"&gt;
                      &lt;iframe id="iframe" src="foo.com"&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>