2010-11-06 4 views
8

J'ai une table à l'intérieur d'un div positionné absolu. La div s'étend en utilisant 0 et 0, et il semble qu'il s'étire comme prévu cross-browser. (J'ai vérifié, j'ai mis une bordure dessus et ça s'est étiré comme prévu). Maintenant, à l'intérieur de la div j'ai une table. Je veux que la table s'étende sur tout l'espace div, et dans Google Chrome, c'est le cas. Mais dans Internet Explorer et Firefox ce n'est pas le cas, la table s'étend à la largeur, mais ignore la propriété height et sa hauteur est déterminée par son contenu.Tableau 100% hauteur à l'intérieur d'un div absolu

Y at-il un moyen de le réparer, ou de le contourner d'une manière ou d'une autre?

Voici le 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

est-il une raison d'utiliser la table dans un div qui est tout à fait positionné. – kobe

+0

oui, car ma div est là pour déterminer la hauteur. – Tal

+0

la page est étirée à la taille de l'écran, et la div s'étire comme prévu. la table devrait s'étendre à la pleine taille de la div, mais comme je l'ai dit, seul google chrome le comprend. – Tal

Répondre

3

Définition d'une height de votre 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

c'est exactement le problème. Je ne veux pas définir la hauteur, car elle change avec la taille de la fenêtre. – Tal

+0

@Tal voir ce lien, 'http: // jsfiddle.net/6bqkL/1 /' son travail dans Firefox, IE et chrome aussi. –

+0

et encore une chose, assurez-vous que votre div absolu n'est 'pas enveloppé 'dans une div qui est définie sur' position: relative'. –