28172 sujets

CSS et mise en forme, CSS3

[résolu] Casse-tête chinois

Bonjour à tous,

Je suis nouveau sur ce forum, et désolé, mais mon premier post sera un appel à l'aide!

J'essaye de faire en sorte d'obtenir le résultat suivant :

http://s11.postimg.org/l4na9a6lv/blocs_50_responsive.png

Deux blocs l'un au dessus de l'autre, chacun de hauteur égale à la moitié d'un troisième positionné à leur côté. Facile à faire dans un contexte classique, avec des hauteurs fixes, mais dans un environnement responsive, avec une hauteur variable pour le troisième bloc?

J'arrive à obtenir quelque chose en utilisant du display: table et du display: table-cell sur Firefox, Chrome et Safari, mais sur IE (toutes versions à partir de la 9), cela ne fonctionne pas.

Si quelqu'un a une astuce pour réaliser cela en css uniquement, je suis preneur et il aura ma gratitude éternelle! Smiley cligne
Modifié par cedric14 (08 Mar 2015 - 13:58)
La solution de gc-nomade est intéressante mais sinon tu peux utiliser un bon vieux tableau de mise en forme. Quant à une solution à base de flexbox, c'est plus long à mettre en place (car moins bien implémenté).
Administrateur
Bonjour,

La solution de gcyrillus est très bonne, mais les éléments de gauche demeurent de hauteur fixe et créeront des barres de scroll si le contenu est long Smiley ohwell

Sans trop m'avancer, je crois que le problème ne sera pas si facilement géré via table-cell (dans mes souvenirs je m'étais cassé les dents dessus)

Voici une solution Flexbox, "parfaite" ... à condition de laisser tomber IE9 : http://codepen.io/raphaelgoetter/pen/xbaXqp?editors=110

Bonne journée
Je profite de cette question pour rebondir sur une autre plus générale.

Pourquoi ne pas utiliser du javascript dans ce genre de cas où l'on est obligé de définir un rythme vertical ?
A part le problème du 'recalcul' des dimensions des éléments sur le "$(document).ready", qui fait bouger la page, quels sont les autres désavantages de la solution javascript ?
Administrateur
Heillige Leben a écrit :
quels sont les autres désavantages de la solution javascript ?

Personnellement cela ne me pose pas de problème particulier, mis à part le fait d'utiliser une technologie qui n'est pas faite pour ça.
Raphael a écrit :

Sans trop m'avancer, je crois que le problème ne sera pas si facilement géré via table-cell (dans mes souvenirs je m'étais cassé les dents dessus)

Ce qui est le plus limitatif, c'est le height en % d'un bloc qui est incapable de prendre la hauteur implicite de son parent sans que celle-ci soit précisée. J'imagine que ça doit poser problème en terme de rendering pour pas que les dev du CSS working group l'aient mis en place.
Modifié par Hermann (08 Mar 2015 - 15:42)
Merci à tous pour vos réponses.

J'ai pour le moment opté pour la solution de gc-nomade, j'obtiens un résultat plutôt satisfaisant avec.

Concernant la solution de Raphaël avec flexbox, j'y avais pensé mais écartée à cause du risque d'incompatibilité avec certains navigateurs. Cependant, avec un polyfill (modernizr le fait non?), je pense que cette incompatibilité peut être effacée mais du coup il y a tout de même recours à du javascript.

Je crois d'ailleurs que mes prochaines intégrations vont plutôt aller dans ce sens, étant donné que la plupart ont une couche de javascript nécessaire.

Encore un grand merci pour votre aide en tout cas!
Sujet clos
Aller à