XHTML CSS

Derniere modification : 2008/10/10 12:24

2 Collones avec la meme hauteur


Il y a une astuce pour arriver au meme résultat sans utilise d'image de fond :)

rappellez vous le tuto de matéo. on peut indiquer une hauteur en cm, en pouce en pixel, mais également en POURCENTS !

et c'est là l'astuce !

on place les 2 "divs" dans le "conteneur" sans lui donner de hauteur.
et ensuite on met height : 100% aux 2 divs.

Résultat : le div le plus haut va aggrandir le conteneur, et le plus petit sera forcé de se mettre à la même hauteur...

Je me permet de corriger ce qu'a dit Annacconda : un div avec {height: 100%} ne prendra toute la place verticale que si ses parents ont une dimension fixée.

Par exemple, si on ne définit pas la hauteur du conteneur, la solution du height: 100% ne fonctionnera pas.
Dans le cas où on met {height: 100%} au conteneur, il faudra que son propre conteneur est un height défini.
Ainsi, on en vient à mettre un {height: 100%} à tous les éléments parents (par exemple : html > body > #page > #conteneur ) aux deux colonnes.

Ça peut être lourd, mais cette méthode est plus propre (moins de <div> ), flexible (résoud le problème des contours) et fonctionne sur les designs extensibles.