Stretch div imbriqués à la hauteur du div conteneur lorsque le conteneur a height:auto?

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

Ce que j'ai essentiellement besoin est de faire les deux divs imbriqués ont toujours la même hauteur. J'ai pensé que cela peut être réalisé en donnant la div conteneur hauteur:auto alors qu'il étendrait sa propre hauteur de la plus haute des deux divs imbriqués (qui s'étend pour s'adapter à son contenu propre), et puis l'autre imbriquée div étendrait à 100% du conteneur hauteur.

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 plus longue div ("de gauche" dans ce cas), mais le plus court imbriquée div ("droit") n'est pas étiré.

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

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

Est-il de toute façon je peux obtenir que cela fonctionne sans avoir recours à des tables?

OriginalL'auteur Rahul | 2010-03-06

  1. 1

    Les deux façons les plus courantes pour ce faire sont Faux Colonnes à l'aide d'images ou de réglage de la hauteur des valeurs égales avec JavaScript. J'ai fait un screencast pour démontrer la seconde technique, L'égalisation de la Colonne Hauteurs avec jQuery. La technique pourrait être facilement adapté à d'autres bibliothèques ou de la plaine JavaScript.

    OriginalL'auteur Jimmy Cuadra

  2. 1

    Le point Important à Noter est que pour Cent de la Valeur de la Hauteur Obsolète il y a un moment. Donc, vous devez utiliser un autre modèle.

    La plupart du temps (spécialement dans votre cas), les panneaux de hauteur sont des ensembles automatiquement. Il est donc préférable d'augmenter la hauteur avec un peu de 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>

    noter que changer le lieu de la Droite et de la Gauche de la base de onyour cas.

    Si il a besoin de deux colonnes identiques (en fonction de la hauteur de la plus grande), il pourrait être intéressant de le transformer en une fonction pour trouver qui est le plus haut des deux divs, puis l'attribution de la hauteur pour les plus petits.
    J'ai eu la mise à jour du script dans votre senario. vérifiez qu'il.
    Hajloo, +1 pour la révision et de la fonction =)
    Je voudrais l'utiliser, mais je voudrais passer deux variables, c'est à dire IncreaseHeight(id1, id2) et de modifier le Document.getElementById("Droit") du Document.getElementById(id1) et de "gauche" pour id2 de cette façon, vous pouvez passer plusieurs colonnes. appelez ensuite increaseHeight avec des divs vous avez besoin de comparer. Vous pourriez avoir à ajouter des balises de chaîne de caractères, parce que je ne suis pas sûr que vous pourriez passer des variables comme ça à l'aide de Document.getElementById

    OriginalL'auteur Nasser Hadjloo