Sync hauteurs de div

Par Vallyan, il y a 12 ans

Les bases HTML/CSS

Bon, je galère sur la questions suivante, betement:
j'ai deux div cote-a-cote, et je voudrais qu'elles soient de hauteur identique (celle qui a le plus de contenu décide de la hauteur, donc).
J'ai pas de pb pour le faire en JS, mais intuitivement j'aurais pensé que c'était faisable en css directement ... mais impossible d'y arrive.r

Petit codepen: comment qu'on fait en sorte que le truc jaune moche soit de la hauteur du truc bleu moche ?

A noter que je connais ce hack: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks, mais qu'en l'occurence il ne me convient pas puisque ce n'est pas la div mais le container de derrière qui est ajusté a la hauteur.

Merki !

8 réponses

coloo, il y a 12 ans

Le cache misère :

*{margin:0;}
.container{overflow: hidden;}
#nav-container {
  float: left;
  width: 30%;

}
nav {
  border-radius: 5px;
  background-color: yellow;
  width: 90%;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
main {
  background :green;
  float: left;
  width: 70%;
}

Ce que je ferais : 

*{margin:0;}
.container{position:relative;}
#nav-container {
  position:absolute;

  left:1%;
  top:0;
  bottom:0;  
  width: 29%;

}
nav {
  height:100%;
  border-radius: 5px;
  background-color: yellow;
  width: 90%;

}
main {
  margin-top:5px;
  background :green;
 margin-left:30%;
  width: 70%;
}
Vallyan, il y a 12 ans

Alors c'est pas parfait vu qu'il me manque mon morceau de nav du bas (avec le border-radius et un box-shadow qui disparaissent), mais c'est de très loin ce que j'ai vu de mieux jusqu'a présent.
Merci mon Coloo :)

Je laisse ouvert un moment si quelqu'un a une alternative, mais si non je te valide ton truc.

coloo, il y a 12 ans

J'ai édité vava :p me laisse pas le temps de chercher dans mes fagots aussi :p, y a pas de shadow box ? enfin je le vois pas sur le codepen...

Vallyan, il y a 12 ans

Bien joué, ca fonctionne comme un charme.
Et effectivement il n'y avait pas le box-shadow sur le codepen :/

Merci :)

coloo, il y a 12 ans

Je suis un pro de la balise p, je vais m’intéresser à la balise li maintenant ^^.

++

Vallyan, il y a 12 ans

coloo ?

coloo, il y a 12 ans

vava ?

Vallyan, il y a 12 ans

Je t'aime mon coloo <3