La div enfant doit être aussi élevée que div div

Question

J'ai besoin d'un div enfant pour être aussi haut que son parent, mais je ne connais pas la taille du parent. Cela peut changer. La définition de "height: 100%" ne fonctionne pas, car la div prendra la hauteur de la page entière.

C'est la mise en page des divs:

<div id="deelnemersballoon"> 
    <div class="balloonarrow"></div> 

    <div class="balloonborder"> 

     <div class="ballooncontent"> 
      <div id="aantaldeelnemers">1</div> 
      <div id="deelnemertekst">deelnemer werd toegevoegd.</div> 
      <div class="clear"> 
       <button>Add something</button> 
      </div> 
     </div> 

    </div> 

</div> 

.balloonarrow devrait être aussi élevé que #deelnemersballoon

Answer 1

Définir la hauteur div div en pixels (par ex. Hauteur: 100 px) et définir l'enfant comme 100% (hauteur: 100%). L'enfant n'occupe que la largeur div divisée entièrement

Answer 2

Essayez d'ajouter la position: par rapport à la div parent. Ensuite, le 100% sur le div enfant doit référencer le div parent. En général, 100% de hauteur va chercher l'élément parent le plus proche sur lequel est positionnée une position - et s'il n'en trouve aucune, il trouvera éventuellement la balise body et l'utilisera.

Answer 3

Je n'ai jamais eu beaucoup de chance avec la taille: 100%; même en jouant selon les règles. Que fait .balloonarrow? Si vous essayez juste d'accrocher un graphique au bas de la div, vous pouvez essayer position: absolute; et en bas: 0px ;, tant que #deelnemersballoon est positionné sur: relatif ;. Si vous cherchez simplement à créer un visuel solide/structuré contenu par .balloonarrow, vous feriez mieux de faire une image étirable: créez une image de 3px ou 4px, faites-en l'arrière plan #deelnemersballoon, et réglez pour répéter-y. Façon rapide et sale de faire une barre latérale de 100% de hauteur.

Espérons que cela aide, ne peut pas dire beaucoup plus sans voir votre css.

Answer 4

Un div enfant ne prendra pas 100% de son parent si elle a quelque chose dans le balisage avant qu'il:

Html:

<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div> 

css:

#parent {background:blue; height:500px; color:white} 
    #child {background:red; height:100%} 

Vous pouvez trouver un exemple de travail ici. (Suppression du texte de la #parent div fera l'enfant le remplir à 100%)

http://jsfiddle.net/wcprA/2/

La même chose vaut si vous avez le balisage après l'aswell enfant 100%, comme on le voit ici

http://jsfiddle.net/wcprA/5/