28172 sujets

CSS et mise en forme, CSS3

Hauteur de bloc css

Bonjour,
J'ai deux blocs cote à cote contenus dans un ancetre ( conteneur )et un parent (wrap)...
Comment faire pour que le premier (colonne1) s'adapte en hauteur à la taille du 2ème (colonne 2) ??
Voici mon code :

#conteneur {width:1000px; margin:0 auto;}
#wrap {overflow:hidden;}
#colonne1 {float:left; width:180px;
background-image:url(./images/fond_menu.jpg);background-repeat : repeat-y;}
#colonne2 {margin-left:180px;}

Merci d'avance de vos réponses

Isabelle
Bonsoir.
Sauf erreur de ma part, il n'est pas possible de faire correspondre la taille de deux éléments distincts. La seule "solution" serait de placer le bloc le plus haut dans l'autre, de tel sorte qu'il étire l'autre bloc, permettant de les avoir tous les deux de la même hauteur. Mais c'est assez contraignant en terme de design...
Administrateur
Hello,

Il est également possible de fixer une hauteur minimale égale à l'aide de la propriété "min-height".
Bien sûr, si l'un des blocs dépasse cette hauteur minimale, ils ne seront plus égaux.
Bonjour,

Toujours dans les solutions possible, tu peux également utiliser la propriété CSS display (table et table-cell). Mais cette solution ne sera pas supportée par IE6 et 7, donc à utiliser en connaissance de cause Smiley smile
Je dis peut être une connerie mais est ce que ca ne serait pas envisageable via un petit script php s'exécutant une fois la page chargée ? Tu récupères la hauteur du plus grand bloc et tu l'assignes comme min-height à l'autre bloc ?

Évidement niveau accessibilité ce n'est pas top, mais c'est une "astuce" qui pourrait fonctionner si tu tiens absolument à avoir ces deux colonnes de même taille
pixelb a écrit :
Je dis peut être une connerie mais est ce que ca ne serait pas envisageable via un petit script php s'exécutant une fois la page chargée ? Tu récupères la hauteur du plus grand bloc et tu l'assignes comme min-height à l'autre bloc ?

Évidement niveau accessibilité ce n'est pas top, mais c'est une "astuce" qui pourrait fonctionner si tu tiens absolument à avoir ces deux colonnes de même taille


Un script PHP demanderait de recharger la page. Il faut également prendre en compte l'agrandissement des caractères. Il existe des solutions qui marchent (colonnes factices / display) et qui sont facile à mettre en oeuvre, pourquoi se compliquer la vie avec une solution moins efficace et plus compliquée ?
Modifié par Laurie-Anne (28 May 2010 - 09:23)
Eh bien merci de toutes ces réponses, c'est vraiment sympa...
J'ai résolu le problème avec les colonnes factices...
Super !
Merci à tous...
Laurie-Anne a écrit :


Un script PHP demanderait de recharger la page. Il faut également prendre en compte l'agrandissement des caractères. Il existe des solutions qui marchent (colonnes factices / display) et qui sont facile à mettre en oeuvre, pourquoi se compliquer la vie avec une solution moins efficace et plus compliquée ?


Oops, je parlais bien sûr d'un script javascript et non php...
Bon finalement pas si résolu que ça..
Ca fonctionne mais j'ai un petit décalage pas très joli, que je n'arrive pas à éliminer :

Je pense qu'il se situe au niveau du bloc wrap....

voici ce que ça donne :
upload/29952-decalge.jpg

Je vous joins mon code :

#conteneur {
width:1000px;
margin:0 auto;}
#header {background-image:url(./images/fond_haut.jpg);
color : white;
background-repeat:repeat-x;}
#logo {}
#wrap {overflow:hidden;
background-image:url(./images/fond_menu.jpg);
background-repeat : repeat-y;
}
#sidebar {float:left; width:180px;
}
#contenu {margin-left:170px;background-color : white;padding: 10px;color:black;}
#footer{background-image:url(./images/fond_mentions.jpg);
text-align : center;
color : white;
background-repeat:repeat-x;}

Merci d'avance à tous...

Isabelle
Sujet clos
Aller à