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

Question

I have next html code

<         


        

Answer 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

Answer 2

Using <div> should be something like this:

<div style="width:100%;height:100%;background-color:#00f;color:#fff;">

    <div style="background-color:#f00;">
        <h1>This text should make height of this cell</h1>
    </div>

    This cell should take all unused space of table


    <div id="footer" style="background-color:#0f0; position:absolute; bottom:0px;width:100%;">
        <h1>This text should make height of<br> this cell</h1>
    </div>

</div>

The content in the center is not within a <div>, but in the main <div> itself. :)

Answer 3

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.