web-dev-qa-db-fra.com

Comment définir la hauteur de l'élément pour correspondre à la hauteur d'un autre élément?

J'ai actuellement deux colonnes, avec une autre colonne entre elles. Ce que je veux, c'est que les colonnes gauche et droite s'étendent en hauteur car la colonne centrale a plus de contenu ajouté.

Quelque chose à noter est que je ne peux pas définir une hauteur exacte pour le div parent et que les colonnes gauche et droite sont définies sur "hauteur: 100%". En effet, il ne peut y avoir qu'une petite quantité de contenu dans la colonne centrale, ou beaucoup.

csshtmlheight
16
Jordan

Il semble que vous allez devoir implémenter une approche Javascript. La façon dont je procéderais serait de saisir la hauteur de .legs puis appliquez-le à .flight_no et .price.

La seule autre option à laquelle je peux penser serait de "simuler" en donnant .flight une image d'arrière-plan qui inclurait cependant vos colonnes gauche et droite sont stylistiquement différentes, puis repeat-y dans votre CSS. Si vous faites cela, les barres latérales n'auraient pas réellement à couvrir la même hauteur.

Quelque chose comme ça, en utilisant jQuery, définira dynamiquement vos barres latérales à la hauteur de la colonne du milieu.

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});
21
Chords

Étendre div pour corriger la hauteur, ou disons 100% de la hauteur du conteneur, vous devez chaîner height:100% jusqu'au conteneur à hauteur fixe ou au corps avec un autre height: 100%;. À long terme, vous aurez probablement besoin de cette solution.

Puisqu'il n'y a pas de hauteur fixe, j'ai utilisé height: 100% et enchaîné au corps un html.

body, html { height: 100%; }
.flight
{
    float: right;
    border: 1px solid green;
    height: 100%;
}

Démo

Pour donner la hauteur exacte du conteneur aux barres latérales, vous devez soit utiliser une hauteur fixe, soit utiliser javascript.

1
Starx