2010-11-06 33 views
8

Ich habe eine Tabelle in einem absolut positionierten Div. Das div erstreckt sich über die obere 0 und untere 0, und es scheint, dass es wie erwartet über den Browser erstreckt. (Ich überprüfte, ich legte einen Rand darauf und es streckte sich wie erwartet). Nun, innerhalb der div habe ich einen Tisch. Ich möchte, dass sich der Tisch auf dem ganzen div-Raum erstreckt, und in Google Chrome tut es das. Aber im Internet Explorer und Firefox ist es nicht, die Tabelle erstreckt sich auf die Breite, aber ignoriert die Höhe Eigenschaft, und ihre Höhe wird durch den Inhalt bestimmt.Tabelle 100% Höhe innerhalb eines absoluten div

Gibt es eine Möglichkeit, es zu reparieren oder irgendwie zu umgehen? Hier

ist der 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> 
+0

gibt es keinen Grund Tisch in einem div zu verwenden, die absolut positioniert ist. – kobe

+0

ja, weil mein div dort ist, um die Höhe zu bestimmen. – Tal

+0

Die Seite wird auf die volle Größe des Bildschirms gestreckt, und das div erstreckt sich wie erwartet. Der Tisch sollte sich bis zur vollen Größe dehnen, aber wie gesagt, nur Google Chrome versteht es. – Tal

Antwort

3

definieren height Ihrer 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> 
+3

das ist genau das Problem. Ich möchte die Höhe nicht definieren, da sie sich mit der Fenstergröße ändert. – Tal

+0

@Tal siehe diesen Link, http: // jsfiddle.net/6bqkL/1/'es funktioniert in Firefox, IE und Chrome zu. –

+0

und noch eine Sache, stellen Sie sicher, dass Ihre absolute Div in jedem div, das auf "position: relative" gesetzt ist, nicht "eingepackt" ist. –