title: Make iframe fill remaining height of div in IE
body: <p>I have a div which contains another <code>div</code> of unknown <code>height</code> and an <code>iframe</code>.</p>
  
  <p>I want to make the <code>iframe</code> fill the remaining height of the parent <code>div</code>. After a lot of searching the only way I've found to do this is by using <strong>CSS</strong> tables which works in every browser except IE.</p>
  
  <p>This is the HTML I'm using:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="top"&gt;
          &lt;div style="height: 100px; background: yellow"&gt;Top bar&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bottom"&gt;
          &lt;iframe /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>.container {
      position: relative;
      display: table;
      height: 300px;
      width: 200px;
      text-align: center;
  }
  
  .top {
      display: table-row;
  }
  
  .bottom {
      /* changing this to table-row works correctly except the iframe no longer expands to the full height in IE */
      display: table-cell;
      height: 100%;
      background: blue;
  }
  
  iframe {
      background:red;
      height:100%;
      height:100%;
      position:relative
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/HTq47/" rel="nofollow noreferrer">JSFiddle</a> (Changed the iframe to a div)</p>
  
  <p>In non-IE browsers, the iframe fills the remaining space. In IE the <code>iframe</code> height is set to the same height as the <code>.container</code>. So the full height ends up being the height of the <code>.container</code> plus the height of <code>.top</code>.</p>
  
  <p>This image might explain a bit better:</p>
  
  <p><img src="https://i.stack.imgur.com/rrONp.png" alt="enter image description here"></p>
  
  <p>IE has set the height of the iframe to the full table height but as <code>.top</code> has a height too, it makes the table become larger than the specified height.</p>
  
  <p>Is there anyway to fix this without using JS? I don't want to use JS as it means making sure it updates when things are resized, inserted, etc.</p>