Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table 100% height inside an absolute div

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>
like image 959
Tal Avatar asked Nov 06 '10 15:11

Tal


1 Answers

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>
like image 148
Zain Shaikh Avatar answered Oct 02 '22 14:10

Zain Shaikh