Setting iframe to take remaining space in page

Question

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:

JSFiddle: http://jsfiddle.net/AmVhK/3/show/
Editor: http://jsfiddle.net/AmVhK/3/

There is a table with 2 rows. First one contains a div #toolbar with fixed height. Second row contains a div which holds an iframe. I need the iframe to take the available space below the toolbar div.

Problem I am facing is in IE standards mode (supporting IE8+). Let's say, 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).

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 :)

Setting the toolbar or iframe to absolute position also won't work for my use case. Markup change is ok if necessary (if you want to remove tables)

I have already set the following CSS:

html, body {height: 100%}

Any good solution to implement it.

Answer 1

I think you can simply hide the parent scroll bar and get what you want. Like by simply adding overflow-y hidden:

html, body {
        height: 100%;
        overflow-y:hidden;
    }