La div divisée en position absolue se développe pour s'adapter au parent?

Question

Y at-il de toute façon un enfant positionné en absolu à développer pour remplir son parent positionné relatif? (La hauteur du parent n'est pas fixe) Voici ce que j'ai fait et ça fonctionne bien avec Firefox et IE7 mais pas IE6. :(

<div id="parent"> 
    <div id="child1"></div> 
</div> 

#parent { position: relative; width: 200px; height:100%; background:red } 
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue } 

Answer 1

Si je me souviens bien il y a un bug avec la façon dont poignées IE6 hauteur div. Il ne créer la div à la hauteur nécessaire pour contenir le contenu à l'intérieur lorsque la hauteur est fixée à 100%. Je voudrais recommande deux approches:

1. ne vous inquiétez pas de soutenir IE6 car il est un navigateur mort de toute façon
2. Si cela ne fonctionne pas, utilisez quelque chose comme jQuery pour obtenir la hauteur de la div parent puis définissez la enfant div à cette hauteur
3. fake-le en mettant le backgro unds être de la même couleur afin que personne ne remarque la différence

Answer 2

Vous pouvez réaliser cela en définissant les attributs supérieur et inférieur de l'enfant.

See how this is done

Au bas de cet article, il y a un lien vers IE7 de Dean Edwards (et IE8) la bibliothèque que vous devez inclure pour les visiteurs IE6. C'est une bibliothèque JS qui fait IE6 se comporter comme IE7 (ou 8) lorsque vous l'incluez. Doux!

Dean Edwars' IE7 and 8 JS libraries

Answer 3

Pour autant que je sache, il n'y a pas moyen d'étendre un élément parent autour d'un élément enfant absolument positionné. En rendant l'élément enfant absolument positionné, vous le supprimez du flux régulier des éléments de la page.

J'ai récemment construit un site Web à 2 colonnes où la colonne de droite était positionnée de façon absolue, mais pas la colonne de gauche. Si la colonne de gauche avait moins de contenu et une hauteur plus petite que la colonne de droite, la page couperait la colonne de droite car elle était absolument positionnée. Pour résoudre ce problème, j'ai dû déterminer si la hauteur de la colonne de droite était supérieure à la hauteur de la colonne de gauche et, si c'est le cas, régler la hauteur de la hauteur div divisée par la plus grande des deux.

Voici ma solution jQuery. Je ne suis pas vraiment un codeur alors n'hésitez pas à tordre ceci:

jQuery(function(){ 

    var rightColHeight = jQuery('div.right_column').height(); 
    var leftColHeight = jQuery('div.left_column').height(); 

    if (rightColHeight > leftColHeight){ 
    jQuery('.content_wrap').height(rightColHeight+'px'); 
} 
}); 

Answer 4

C'est facile. L'astuce est mise top: 0px et bottom: 0px en même temps

est ici le code de travail

html, body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

#parent { 
    display: block; 
    background-color: #ff0; 
    border: 1px solid #f00; 
    position: relative; 
    width: 200px; 
    height: 100%; 
} 
#child1 { 
    background-color: #f00; 
    display: block; 
    border: 1px solid #ff0; 
    position: absolute; 
    left: 200px; 
    top: 0px; 
    bottom: 0px; 
} 

Vérifiez un exemple travaillant ici http://jsfiddle.net/Qexhh/