Table 100% height inside an absolute div

Question

I have a table inside an absolute positioned div. The div stretches using top 0 and bottom 0, and it seems it stretches as expected cross-browser. (I checked, I put on a border on it and it stretched as expected). Now, inside the div I have a table. I want the table to stretch on all of the div space, and in Google Chrome it does. But in Internet Explorer and Firefox it is not, the table stretches to the width, but ignores the height property, and its height is determined by its contents.

Is there a way to fix it, or bypass it somehow?

Here is the code:

<div
    style=
        "position:absolute;
         top:40px;
         left:0px;
         right:0px;
        bottom:0px;">
    <table
        width="100%"
        cellpadding="0"
        cellspacing="0"
        style="height:100%;">
    </table>
</div>

Solution

Define a height of your div,

<div style="position:absolute; top:40px; left:0px; right:0px; background-color: #f90; bottom:0px; height: 400px">
    <table width="100%" cellpadding="0" cellspacing="0" style="height:100%;">     
    </table>
</div>

Comments

[Tal]

that's exactly the problem. i don't want to define height, because it changes with the window size.

[Zain Shaikh]

@Tal see this link, http://jsfiddle.net/6bqkL/1/ its working in firefox, IE and chrome too.

[Zain Shaikh]

and one more thing, make sure your this absolute div is not wrapped in any div which is set to position:relative.

[Tal]

but it is wrapped in a relative one.

[Tal]

thats the only way to use absolute positioning, isn't it?

[Zain Shaikh]

no its not necessary for absolute positioning, you can directly set any div to absolute position. so take this absolute div out of the relative one.

[Tal]

but it will change the whole layout. i want the absolute div to be positioned relatively to the relative div.