title: Why does this CSS not work in Firefox?
body: <p>I have spent literally hours trying to work this out - so it's time to ask.</p>
  
  <p>I'm told that for something to have <code>height: x%</code> (a height as a percentage) it's parent needs to have a height, as does it's parent, etc.</p>
  
  <p>So here's my structure:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>html
    body
      div#wrapper
        div#viewer_wrapper
          iframe#viewer
  </code></pre>
  
  <p>And here's some applicable CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body{
      height: 100%;
  }
  #wrapper{
      min-height: 100%; /*it's this that seems to trip me up - a fixed height works for the problem, but not for the layout obviously*/
      position: relative;
  }
  #viewer_wrapper {
      height: 100%;
      position: relative;
  }
  #viewer {
      width: 100%;
      height: 96%;
  }
  </code></pre>
  
  <p>Chrome is very obedient - even without the <code>height:100%</code> on <code>#viewer_wrapper</code>, I have no problem. But on Firefox and IE, the iframe refuses to take up 96% of the screen's height (what I want). I've even tried heaps of JS fixes, all of which lead to not only ugly code, but bad side effects.</p>
  
  <p>Thanks for any help.</p>