28172 sujets

CSS et mise en forme, CSS3

Ajuster la hauteur de 2 blocs

Bonjour,

Je fais appel à vous en fin de journée car je ne sais pas comment m'y prendre...

Sur cette page qui est encore en dév : www Smiley dot abracamundi Smiley dot com/panerai, vous voyez 2 blocs en milieu de page, moutarde et gris.

Je voudrais qu'ils aient la même hauteur, quelque soit le contenu et bien sur que ce soit responsive. Bien entendu, selon les pages, je n'aurai pas tjs la même quantité de texte.

Merci de votre aide !!! Bonne soirée
Marine
Administrateur
Bonjour,

2 moyens d'avoir des colonnes de même hauteur :
- conteneur (le .row actuel) en display: table; table-layout: fixed; width: 100%; et les 2 colonnes en display: table-cell; padding: 0 1rem; et dans chaque colonne 1 élément avec un fond coloré (pas de margin sur les cellules de tableau alors il faut cette astuce pour la gouttière centrale)
edit: height: 100% doit être présent sur les 3 niveaux d'éléments pour que ça se "propage" aux colonnes de contenu.
- Flexbox (et Autoprefixer pou IE10+) : conteneur en display: flex; https://css-tricks.com/snippets/css/a-guide-to-flexbox/ et flex items de 50% de large - la moitié de la largeur de la gouttière

Codepen : https://codepen.io/anon/pen/vXGxba?editors=0100
Modifié par Felipe (14 Sep 2016 - 22:23)
La même hauteur et pour être bien résponsive, perso j'opte pour:
min-height: X%;

En % ou px, selon..
Après avoir trouvé les bonnes valeurs par excès (!), en ayant joué un peu avec les dimensions du browsers..

C'est un peu freestyle mais le résultat a été plutôt propre à plusieurs reprises.
Faut accepter de laisser un peu d'espace visible +- /!\ entre le contenu et le contenant selon les résolutions..
Sujet clos
Aller à