Ajuster la hauteur des div qui sont côte à côte

bonjour,
au niveau du responsive design, je cherche une méthode pour égaliser la hauteur des div qui sont cote à côte (flottants) et qui on des contenus de taille différents, pour éviter ce qu'il y a sur l'image jointe....



merci
Modifié par lionel_css3 (14 Aug 2013 - 09:10)

Plusieurs pistes possibles, la meilleure option dépend de tes contraintes :
- display table-cell
- flexbox
- hauteur fixe via css ou js

La hauteur fixée c'est pas très propre, le table-cell il va merder (je pense, j'ai pas vérifié) si tu réagences certaines divs (sur plusieurs ligne par exemple). Flexbox ca va fonctionner mais c'est pas super simple à mettre en place, surtout si tu vises une bonne compatibilité avec les différents navigateurs.

sephitan a écrit :
Plusieurs pistes possibles, la meilleure option dépend de tes contraintes :
- display table-cell
- flexbox
- hauteur fixe via css ou js

Pas mieux à te proposer à part l'affreuse solution "faux columns"

Mais sinon un outil : http://schnaps.it/ (voir le dernier gabarit)

merci pour vos réponses, je me doutais bien qu'il n'y avait pas beaucoup de solutions..

le display:table-cell, en responsive design, c'est pas le top, je viens de m'y casser des dents pendant 2 jours

Raphael a écrit :

Ah bon ? Un exemple concret ?

dans ce cas je me suis rabattu sur la solution javascript.

ben l'exemple c'était par rapport à ce post http://forum.alsacreations.com/topic.php?fid=4&tid=68471&s=

d'ailleurs, Raphael, lis y mon dernier message, je parle de ton livre

Mon intégration est assez complexe et je ne suis pas assez à l'aise avec le display:table

Hello.

De quelle édition disposes-tu ?
L'erreur ne figure-t-elle pas déjà dans les errata ?

http://www.goetter.fr/livres/css-avancees/errata.html

Raphael a écrit :
Hello.

De quelle édition disposes-tu ?

la 1ere, sans doute, celle imprimée en mars 2011, mais c'est pas un drame, c'est juste que ça m'a occupé une petite heure lol

sympa l’errata, il y a t-il une version compacte imprimable? que je la glisse dans le livre?
Modifié par lionel_css3 (17 Aug 2013 - 10:26)

Bonjour,

Il existe bien une autre technique css,
Elle vaut ce qu'elle vaut, hein!
Je l'avais trouvé, de mémoire, sur stackoverflow.com mais impossible de remettre la main dessus.

div {
  float: left;
  background-color: #eee;
  overflow: hidden;
}
div.wrapper {
  background-color: cyan;
}
div.wrapper div {
  width: 33%;
  margin-left: 0.25%;
  margin-bottom: -5555px; /* Placer ici le nombre magique et négatif que l'on veut */
  padding-bottom: 5555px; /* Placer ici la valeur absolue */
}

A tester sur le code html suivant:

<div class='wrapper'>
  <div>Sed eu nibh id nisl pharetra sagittis eu vel mi. Phasellus quam eros, commodo et congue eu, eleifend consectetur tellus. Morbi vulputate aliquam tortor ultrices tristique. Maecenas venenatis tincidunt lacus eget tristique. Donec sodales velit dictum, cursus tortor tristique, rhoncus dui. Praesent in mauris mattis, vestibulum ante vel, pretium dolor. Pellentesque adipiscing imperdiet odio, eu eleifend libero euismod vel. Phasellus massa turpis, egestas id aliquet euismod, porttitor quis purus. Morbi quis felis sit amet mi commodo tempus. Vivamus sollicitudin posuere massa. Mauris et gravida neque. Donec fringilla a sapien et tincidunt. Duis ut venenatis libero. Suspendisse blandit eros fringilla lorem ullamcorper, non bibendum diam volutpat.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ante in elit pharetra accumsan non ut mauris. Nulla molestie nibh nec augue adipiscing cursus. Nullam mi ipsum, congue eget tristique vitae, ultrices vitae felis. Curabitur viverra nisl non nulla fermentum bibendum. Sed porttitor pharetra ligula ut ornare. Quisque quis aliquet urna. Vestibulum non est lacus. Donec tincidunt, purus laoreet consectetur molestie, nunc massa dignissim tortor, in iaculis sapien felis a purus. Mauris ut leo vel eros commodo porta eget vitae tortor.</div>
  <div>Pellentesque vehicula dui a nunc euismod sollicitudin. Ut massa nibh, tincidunt sed semper vitae, porta eget dui. Etiam leo arcu, ultrices lobortis dolor ac, volutpat euismod nibh. Etiam sagittis nisi non sapien convallis, in sodales augue condimentum. Donec fermentum, risus quis porta auctor, arcu leo varius nulla, quis cursus lacus justo a mauris. Morbi vitae imperdiet leo, eget condimentum arcu. Sed non nisl magna. Sed quis felis dui. Donec porttitor ultricies feugiat.</div>
</div>

Si ça peut être utile.

Salut, j'aurais tendance à garder un fonctionnement standard avec tes div comme tu le montre dans ton premier message pour le départ.
Puis simplement affecter la hauteur dans un second temps en JavaScript (en récupérant la hauteur de la div qui contient ces blocs puis en l'affectant aux blocs à l'intérieur).


Exemple :

<div id="Bloc">
    <div class="bloc1">Bla bla</div>
    <div class="bloc1">Bla bla bla bla bla Bla bla bla bla bla</div>
    <div class="bloc1">Bla bla bla</div>
    <div class="bloc1">Bla bla bla bla bla Bla bla bla bla</div>
    <div class="bloc1">Bla bla</div>
    <div id="retour-ligne"></div>
</div>
fin

#Bloc .bloc1 {color:#cccccc; background-color:#000000; width:10%; margin:0 5px 0 0; float:left;}
#Bloc #retour-ligne {clear:both}

Javascript avec Mootools (et More) surtout pour récupérer le size (éventuellement avec jquery aussi)

var Bloc = document.id('Bloc');
var Hauteur = $(Bloc).getSize().y;
blocs1=$$('.bloc1');
for(i=0; i<blocs1.length; i++){
   $(blocs1[i]).setStyle('height', Hauteur+'px');
}

En espérant que ça t'aide, j'ai fais le test ça marche bien.[/i]
Modifié par AH_creation_site (20 Aug 2013 - 23:40)

AH_creation_site a écrit :
Salut, j'aurais tendance à garder un fonctionnement standard avec tes div comme tu le montre dans ton premier message pour le départ.
Puis simplement affecter la hauteur dans un second temps en JavaScript (en récupérant la hauteur de la div qui contient ces blocs puis en l'affectant aux blocs à l'intérieur).

merci, j'avais pas pensé à ça, je vais étudier cette piste (avec jQuery)

encore merci

Salut, content que ça t'aide !
Je vois ici et là que c'est une solution assez conseillée.
Il y a un petit tutos avec jquery ici : Kryzalid.net/blog/2010/07/16/colonnes-a-hauteurs-egales-en-jquery/ (je ne sais pas ce que ça vaut je n'utilise pas jquery).

Correction de mon post précédent avec Mootools + More (le [ i ] avait disparu, je remplace par [k]) :
var Bloc = document.id('Bloc');
var Hauteur = $(Bloc).getSize().y;
blocs1=$$('.bloc1');
for(k=0; k<blocs1.length; k++){
$(blocs1[k]).setStyle('height', Hauteur+'px');
}