Lier la hauteur de deux divisions en CSS
Fermé
FBDA
-
30 déc. 2006 à 17:56
Ssylvainsab Messages postés 2884 Date d'inscription samedi 29 juillet 2006 Statut Modérateur Dernière intervention 15 août 2020 - 1 janv. 2007 à 21:18
Ssylvainsab Messages postés 2884 Date d'inscription samedi 29 juillet 2006 Statut Modérateur Dernière intervention 15 août 2020 - 1 janv. 2007 à 21:18
A voir également:
- Lier la hauteur de deux divisions en CSS
- Deux comptes whatsapp - Guide
- Deux ecran pc - Guide
- Waze hauteur véhicule ✓ - Forum GPS
- Faire un trait en css ✓ - Forum CSS
- Hauteur de ligne excel en cm - Forum Excel
5 réponses
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
30 déc. 2006 à 23:51
30 déc. 2006 à 23:51
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
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
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
1 janv. 2007 à 19:32
1 janv. 2007 à 19:32
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.
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
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
1 janv. 2007 à 21:18
1 janv. 2007 à 21:18
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
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
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
30 déc. 2006 à 22:53
30 déc. 2006 à 22:53
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 :
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é.
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é.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
30 déc. 2006 à 19:11
30 déc. 2006 à 19:11
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 ?
À 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 ?