表100%绝对div内的高度

时间:2022-01-26 20:25:43

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.

我在绝对定位的div里面有一张桌子。 div使用top 0和bottom 0进行拉伸,看起来它像预期的跨浏览器一样伸展。 (我检查过,我在它上面放了一个边框,它按预期拉伸)。现在,在div里面我有一张桌子。我想让桌子在所有div空间上伸展,而在谷歌Chrome中则可以。但是在Internet Explorer和Firefox中没有,表格会延伸到宽度,但忽略高度属性,其高度由其内容决定。

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>

1 个解决方案

#1


3  

Define a height of your div,

定义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>

#1


3  

Define a height of your div,

定义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>