Deux fieldset de même hauteur

Bonjour,

J'ai deux fieldset cote à cote, mon probleme est que je n'arrive pas à les dimensionner de la même hauteur de manière automatique :





Ce que j'ai tenté de faire :

height : 100%;

Je vous remercie d'avance pour votre aide !

Bonne journée à tous.

Le height:100% ne donnera rien car déjà dans ta tête ça veut dire «bon alors tu prends 100% de la hauteur de l'autre élément... sauf si ce dernier est plus petit que toi... alors dans ce cas c'est lui qui prend 100% de ta hauteur», et tu admettras que c'est pas d'une grande clarté.

Il te faut donc utiliser un mécanisme de mise en page qui permette de lier logiquement la hauteur de deux éléments. Pour ça, tu as display:table-cell en CSS 2.1 (supporté partout sauf dans IE7), et Grid Layout en CSS3 (supporté nulle part sauf dans IE10).

ARF ! Merci @fvsch, sauf que le navigateur visé est justement IE7, à croire que je suis maudite !

Est ce que tu penses qu'une fonction jquery au chargement de la page, en testant les deux fieldset pour en déduire qui est le plus grand et attribuer au plus petit la hauteur du plus grand, n'alourdirai pas mon chargement ?

Salut,

dans ce cas il ne te reste que la solution de dimensionner un des 2 éléments, voir les 2.

Hello.

Le coup du JS, ce n'est pas ce qu'il y a de plus robuste. En devant supporter IE7 dans le cas présent, j'aurais tendance à tricher et recourir à une technique de fausse colonnes.

EDIT: En y regardant à deux fois, le coup des fausses colonnes ça ne va pas marcher non plus. Tu peux par contre tout bêtement rajouter un padding-bottom de la taille du line-height d'une de tes lignes au fieldset de droite. Le souci est que ça n'est pas une solution passe-partout.
Modifié par Florian_R (02 Jul 2012 - 10:27)

Merci @Florian_R, pour le coups du line-height j'ai rien compris ^^

En ce qui concerne la triche avec colonne j'ai déjà essayé et çà n'a rien donné de concluant.

Sinon peut etre que si je vous dis que c'est toujours le même fieldset qui est plus grand du a son contenu (et qu'il ne change jamais) peut être qu'on peut en sortir un truc ?


Sinon au niveau JS, tu trouves que c'est pas robuste ? Tu penses que c'est un peu bancal comme idée ? J'pensais pas que çà pourrait beugé (j'ai pas encore testé) mais j'pensais plus au niveau performance d'affichage :s

La hauteur d'une de tes lignes de formulaire = son line-height + padding top et bottom + margin top et bottom, en prenant en compte les fusions de marges.

Ici, tu sais que ton fieldset est plus petit d'une ligne donc tu lui ajoutes un padding-bottom de cette taille.

Ce n'est pas super robuste, vu qu'un changement de markup oblige à redéclarer ce padding, mais c'est mieux qu'une solution JS bancale.

Après, rien ne t'empêche de faire du table-cell pour IE > 8, et conserver le rendu actuel pour IE7, plutôt que d'utiliser une solution trafiquée.

Ok ! J'vais travailler le sujet mais les versions à prendre en compte sont inférieurs ou égale a IE7 XD sisi y'a encore des gens qui veulent que les anciens navigateurs

en tout cas merci de votre coup de main et de vos conseils !!!

mini-truc a écrit :
Est ce que tu penses qu'une fonction jquery au chargement de la page, en testant les deux fieldset pour en déduire qui est le plus grand et attribuer au plus petit la hauteur du plus grand, n'alourdirai pas mon chargement ?

Si, ça alourdira ton chargement. Mais ça marchera.
Si c'est juste pour une question esthétique et que ta mise en page ne repose pas dessus, ça peut le faire.

Bien sûr on utilisera min-height (compatible IE7, ouf) et pas height. Les hauteurs fixes, c'est le mal.