title: Setting iframe to take remaining space in page
body: <p>There are quite a lot of questions regarding iframe and it's height. Some are similar but not giving me the right answer. So let me explain my case:</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/AmVhK/3/show/">http://jsfiddle.net/AmVhK/3/show/</a><br>
  Editor: <a href="http://jsfiddle.net/AmVhK/3/">http://jsfiddle.net/AmVhK/3/</a></p>
  
  <p>There is a table with 2 rows. First one contains a div #toolbar with <strong>fixed</strong> height. Second row contains a div which holds an iframe. I need the iframe to take the available space below the toolbar div.</p>
  
  <p>Problem I am facing is in <strong>IE standards mode</strong> (supporting IE8+). <em>Let's say</em>, the height of the window is 1000px and height of toolbar is 200px, then the height of the iframe is also 1000px and so has scrollbars. I need the iframe to have height of (page height-toolbar height).</p>
  
  <p>It would be good if there is a CSS solution. Using JavaScript to get the height available and setting it to the iframe or it's containing div is the last resort solution for me :)</p>
  
  <p>Setting the toolbar or iframe to absolute position also won't work for my use case. <strong>Markup change is ok if necessary</strong> (if you want to remove tables)</p>
  
  <p>I have already set the following CSS:</p>
  
  <pre><code>html, body {height: 100%}
  </code></pre>
  
  <p>Any good solution to implement it.</p>