Comment faire flottante intérieure divs la même hauteur que le plus haut div

Dans le code suivant, j'aimerais que le div avec 'y' à la hauteur de la div avec le 3 'x.

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
    x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
    y
</div>

Choses à noter, à l'intérieur divs sont flottants.

Vous pourriez peut-être utiliser le CSS égale hauteur des colonnes astuce?

OriginalL'auteur Jase Whatson | 2009-05-17

  1. 3

    Si vous n'êtes pas défavorable à un spot de jQuery, vous pouvez utiliser EqualHeight, il devrait faire ce que vous voulez

    Bien que je déteste utiliser le Javascript pour ce genre de chose c'est approprié, parce que le projet est déjà à l'aide de JQuery.
    Cela peut avoir travaillé lorsque la réponse a été choisi, mais il ne fonctionne pas du tout avec les dernières versions de jQuery. a) $.browser.msie n'existe plus (changement de $.support.boxModel), b) Il définit un min-height, qui ne parvient pas si vous avez déjà un min-height définie dans le CSS qui est plus haut, comment cela arrive même, je ne sais pas). Même avec ces 2 choses fixes, c'est de ne pas fixer les hauteurs correctement.

    OriginalL'auteur Dan F

  2. 12

    Il y avait une solution, j'ai vu dans Une Liste à Part (je crois), où vous donner les deux intérieur des colonnes d'un énorme remplissage en bas, mais la même valeur qu'une marge négative. Tout cela fonctionne tant que la colonne n'est pas plus de 32000px haut, ce qui est rare. Quelque chose comme:

    .col {
  float: left;
  padding-bottom: 32000px;
  margin-bottom: -32000px;
}

    ...où "col" est le nom de la classe pour n'importe quelle colonne. Vous pouvez ensuite le style des colonnes individuelles toutefois vous le souhaitez avec une classe distincte.

    <div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>

    Une autre option est d'utiliser une image d'arrière-plan sur la div extérieure, y compris des frontières, etc. Évidemment, cette approche signifie que c'est un peu plus difficile pour les changements les colonnes (largeurs, couleurs) une fois mis en place.

    Après j'ai mis overflow: hidden sur le conteneur cela a fonctionné pour moi (c'est à dire 7-9 & FF).
    Très joli, mais pas tout à fait là! Si j'applique une bordure ou des coins arrondis à l'intérieur de la vrd, qui est coupé en bas.

    OriginalL'auteur DisgruntledGoat

  3. 5

    Vous avez trois options.

    1. Faire l'intérieur divs fois plus élevé que la div extérieure. Ce n'est pas trop dur;
    2. Mettre à l'intérieur de la vrd à l'intérieur d'une div et d'essayer d'utiliser la hauteur et/ou min-hauteur de 100% pour les rendre aussi haut que le div contenant bien que je soupçonne que cela ne fonctionnera pas tant que le div contenant sera probablement étirer à la hauteur de sa div contenant ou de la page. Il peut être vaut la peine d'essayer de bien; ou, plus simple de toutes les
    3. Utiliser des tableaux. Ce problème est trivial avec des tables. C'est un bon exemple de pur CSS lacunes.

    Il n'y a pas de moyen simple de deux divs "partager" de hauteur. Des astuces comme 100% de la hauteur, avoir des problèmes de navigateur à la fois en termes d'attributs CSS vous avez besoin pour utiliser et avec des frontières, qui vous utilisez. Les frontières sont généralement en plus de toute hauteur que vous utilisez.

    Certains pourraient dire utiliser display: table-cell mais le soutien qui est plutôt limitée (sous IE).

    +1 parfois vous avez juste à mordre et à l'utilisation des tables.
    +1 pour les tableaux, si cela fonctionne, et accélérer le temps de développement.
    -1 pour les tables (ce qui n'est pas accessible tant que vous êtes en utilisant un balisage sémantique pour des raisons purement visuel hacks. Utilisateurs de lecteurs d'écran sera très en colère.
    upvote nouveau - parce que downvotes ne sont pas justes
    Les Tables ne sont pas une bonne option lors de l'utilisation des media queries. Si j'ai un 4x3 grille que je tiens à l'échelle vers le bas à 3x4 et puis 2x6, les tables ne fonctionnera pas.

    OriginalL'auteur cletus