Absolue positionné enfant div étend pour s'adapter à la société mère?

Est-il de toute façon pour un absolu placé l'enfant à s'étendre à remplir sa relative positionné parent? (La hauteur de parent n'est pas fixe)
Voici ce que j'ai fait et il fonctionne très 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 }

OriginalL'auteur | 2009-08-04

  1. 16

    C'est facile. Le truc, c'est le réglage de top: 0px et bottom: 0px en même temps

    Voici 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;
}

    Découvrez un exemple ici http://jsfiddle.net/Qexhh/

    OriginalL'auteur Joshua Robison

  2. 1

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

    1. Ne vous inquiétez pas sur la façon de soutenir IE6 car c'est une mort navigateur de toute façon
    2. Si cela ne fonctionne pas, utilisez quelque chose comme jQuery pour obtenir la hauteur de la div parent et ensuite la valeur de l'enfant div à la hauteur.
    3. faux en définissant les horizons d'être de la même couleur, de sorte que personne ne remarque la différence
    +1 pour le point numéro un. Bravo! IE6 est près de NEUF ans. L'enterrer!!

    OriginalL'auteur Chris Johnston

  3. 0

    Vous pouvez réaliser cela avec définissant à la fois le haut et le bas des attributs de l'enfant.

    Voir comment c'est fait

    Au bas de cet article, il y a un lien de Dean Edwards' IE7 (et IE8) bibliothèque js que vous devriez inclure IE6 pour les visiteurs. C'est une librairie JS qui FAIT réellement IE6 se comporter comme IE7 (ou 8) lors de l'inclure. Sweet!

    Dean Edwars' IE7 et 8 bibliothèques JS

    OriginalL'auteur kmiyashiro

  4. 0

    Autant que je sache, il n'existe aucun moyen d'expansion d'un parent de l'élément autour d'une position absolue de l'élément enfant. En faisant de l'enfant de l'élément en position absolue de votre retrait de la circulation normale des éléments d'une page.

    J'ai récemment construit un 2-colonne de site web où la colonne de droite est en position absolue, mais la colonne de gauche ne l'était pas. Si la colonne de gauche a eu moins de contenu et une hauteur plus petite que la colonne de droite, la page de couper la colonne de droite, car il était en position absolue.

    Afin de résoudre ce problème, j'ai eu à déterminer si la hauteur de la colonne de droite était plus grande que la hauteur de la colonne de gauche et, si oui, définir la hauteur de la div parent hauteur de la plus grande des deux.

    Voici mon jQuery solution. Je ne suis pas beaucoup d'un codeur, donc n'hésitez pas à tordre:

    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');  
 }  
});

    OriginalL'auteur