how to make full height cell in full height table in Internet Explorer

Solution 1:

Don't use tables for layout please,

Use Divs and CSS, It is considered a bad practice to use tables:

http://shouldiusetablesforlayout.com

http://www.hotdesign.com/seybold/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Live Demo converted to DIV's

Solution 2:

If you define a height for the body element then the blue cell does expand to fill the available space (JS FIddle demo). The problem is that an element of height: 100% takes up the full height of its parent, and for that to happen the browser has to know (be told) what the height of that parent element is.

You could achieve this with JavaScript (JS Fiddle Demo) (or any one of the various libraries, eg jQuery: JS Fiddle demo¹), or by using:

table {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

JS Fiddle demo

1. I have no idea why using the jQuery version results in scrolling. I've tried removing padding, margin etc from the various elements (body and table), but it results in the same behaviour. Which is a tad weird, to me.