Étirer div divisée en hauteur du conteneur div lorsque le conteneur a une hauteur: auto?

Question

J'ai un conteneur div et deux divs imbriqués à l'intérieur. Je n'ai aucun contrôle sur le contenu de ces divs imbriqués.

Ce dont j'ai essentiellement besoin, c'est que les deux divs imbriqués aient toujours la même hauteur. Je pensais que ceci pouvait être réalisé en donnant la hauteur du conteneur div: auto afin qu'il s'étende de sa propre hauteur au plus grand des deux divs imbriqués (chacun s'étirant pour s'adapter à son propre contenu), puis l'autre div imbriqué étirerait à 100% de la hauteur du conteneur.

Voici ce que j'ai essayé:

Style:

#container{ 
    background-color:#FF0; 
    overflow:auto; 
} 

#left{ 
    float:left; 
    height:100%; 
    width:20%; 
    background-color:#F00; 
} 

#right{ 
    height:100%; 
    width:60%; 
    background-color:#0F3; 
} 

HTML:

<div id="container"> 

<div id="left"> 
    <p>Content</p> 
    <p>Content</p> 
    <p>Content</p> 
</div> 

<div id="right"> 
    <p>Content</p> 
    <p>Content</p> 
</div> 

</div> 

Mais cela ne fonctionne pas. Le conteneur s'étire pour s'adapter à la div la plus longue ("left" dans ce cas) mais la div imbriquée plus courte ("right") ne s'étire pas elle-même.

Notez, cependant, que cela ne fonctionne si je donne le récipient une hauteur spécifique:

#container{ 
    background-color:#FF0; 
    overflow:auto; 
    height:300px; 
} 

Est-il possible que je peux obtenir ce travail sans avoir recours à des tables?

Answer 1

La note importante est que la valeur en pourcentage de la hauteur a été dépréciée il y a un certain temps. Donc, vous devez utiliser un autre modèle.

La plupart du temps (spécialement dans votre cas) la hauteur des panneaux est automatique. Il est donc préférable d'augmenter la hauteur avec un peu javascript

<script> 
    function IncreaseHeight() 
    { 
     var first = Document.getElementById("Right").style.height; 
     var second = Document.getElementById("Left").style.height; 

     if(first < second) 
     Document.getElementById("Right").style.height = Document.getElementById("Left").style.height; 
     else 
     Document.getElementById("Left").style.height = Document.getElementById("Right").style.height; 
    } 
</script> 

Notez que changer la place du droit et de la base gauche onyour cas.

Answer 2

Les deux méthodes les plus courantes pour ce faire sont Faux Columns en utilisant des images ou le réglage des hauteurs à des valeurs égales avec JavaScript. J'ai fait un screencast pour démontrer la seconde technique, Equalizing Column Heights with jQuery. La technique pourrait être facilement adaptée pour d'autres bibliothèques ou pour JavaScript simple.