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

Question

I have next html code

<         


        

Answer 1

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.