lier la hauteur de deux divisions en CSS

Question

Bonjour,
J'aimerais savoir s'il est possible de lier la taille de plusieurs divisions de taille variable entre elles, de manière à ce que la taille de toute soit celle de la plus haute. Si oui, comment fait-on ?
Concrètement, en CSS je crée 3 divisions qui me permettent de mettre des infos sur la partie droite de la page, des infos au centre et des liens utiles à droite. J'aimerais que les 3 divisions aient pour longueur celle de la plus longue des 3..
Merci d'avance

Gihef · Answer

Bonjour,

À ma connaissance ça n'est pas encore possible. En CSS3, je crois que c'est prévu.

La seule manière que je connaisse est l'utilisation de tableaux. Les cellules prennent la hauteur de la plus haute.

La plus haute a une hauteur fixe ? Ou s'adapte-t-elle au contenu ?

Ssylvainsab · Answer

Bonsoir.

Je ne suis pas sur de comprendre : tu veux faire une mise en page avec une colonne x à gauche, et deux colonnes y et z à droite, de facon à ce que la hauteur de x soit égale à celle de y + celle de z, et que les bords des boites soient à la même hauteur ?

Ce qui donnerait quelquechose comme :

------------+-----------------+
            l     Boite y     l
   Boite    l-----------------+
            l                 l
     x      l     Boite z     l
            l                 l
------------+-----------------+

Désolé si ce n'est pas du tout ca, mais c'est ce que j'ai compris.

Pour ca, je pense que tu peux mettre les 3 boites dans une seule boite.
Ensuite, utiliser margin:0 et padding:0 sur les 4 boites, puis définir une hauteur de 100% à la boite x et de 75% et 25% (par exemple) aux deux autres boites.

Pour définir des hauteurs verticales et relatives, voir :
css definir une hauteur verticale et relative a un element

j'espère que je t'ai aidé.

Ssylvainsab · Answer

Je ne sais pas si c'est bien ca que tu voulais, mais j'ai réussi.

C'est plein de nombres à virgules, un peu trop de float je pense (à améliorer), mais ca marche.
http://ssylvainsab.free.fr/CCM/trois-boites-de-meme-hauteur.html

Gihef · Answer

Salut Ssylvainsab (-:

Vraiment, ça m'intéresse.
Je n'ai jamais réussi à faire fonctionner des hauteurs, adaptables, en auto ou en %.

Bonne piste.
J'ai repris ton exemple, il ne fonctionne plus si on y insère du texte.
Ça déborde, les blocs ne s'adaptent pas au contenu : http://gihef.bey.free.fr/CCM/heightpourcent/Deux-boites_pourcents.html

Il est nécessaire que le bloc Principal ait une hauteur définie (pas en %) suffisante pour que le reste suive : http://gihef.bey.free.fr/CCM/heightpourcent/Deux-boites_pixels.html
Et l'adaptation est relative à la hauteur. Pas à un contenu variable.

Ce qui serait bien, ça serait de pouvoir utiliser un clear en bas. Mais un clear:quoi ? Il n'y en a pas d'adapté.
J'ai tenté ça dans http://gihef.bey.free.fr/CCM/heightpourcent/Deux-boites_pourcents_clear_auto.html
Là, on retrouve des hauteurs nulles pour les blocs vides de droite.
…

Vraiment, s'il y a une solution, ça m'intéresse.

Ssylvainsab · Answer

Salut Ssylvainsab
Salut gihef :-)

Tu peux m'apeller Sylvain :o)

Ça déborde, les blocs ne s'adaptent pas au contenu
Et avec un overflow:scroll; (ou auto) sur le bloc qui contient le texte ?
Normalement, des barres de défilement sont ajoutées.

Ce qui serait bien, ça serait de pouvoir utiliser un clear en bas. Mais un clear:quoi ? Il n'y en a pas d'adapté. 
Je pense qu'un hr (barre horizontale) avec clear:both et visibility:hidden; (ou display:none, à tester) serait pas mal, quoique le hr ne serait pas trop à sa place...

Tu peux aussi essayer un clear:right; sur le bloc bas-droite, ou alors un  float:top sur le bloc haut-droit et un clear top sur le bas.

Bref, un peu fouillis ces idées, mais à essayer.

a plus

Lier la hauteur de deux divisions en CSS

5 réponses

Votre réponse

Discussions similaires