Bonjour à tous,

J'ai fait tout mon site en %, le seul problème c'est que j'ai dû mettre toutes les hauteurs en px car j'ai remarqué que height ne fonctionne pas quand on lui met des %.

Une solution s'il vous plait ?

Cordialement

Royce'

Salut,

Pour avoir du height en pourcentage, il faut obligatoirement qu'un ancêtre dans la chaîne puisse avoir une taille explicitement calculée, donc en pixels.
Pour qu'un div ait une hauteur en %, il faut donc que son parent direct ait une taille fixe ; la hauteur du div sera alors calculée en % de la taille (fixe) du parent. Si le parent direct a lui aussi une taille en %, on remonte la hiérarchie, jusqu'à trouver un parent dont la taille est en pixels, pour pouvoir calculer relativement la taille de tous les enfants (et ça peut donc faire des résultats bizarres, à cause des % dans des % dans des %).

La seule exception à ça, c'est avec les parents body et html : tu peux leur spécifier la taille de 100% en hauteur (et uniquement celle-ci) pour leur dire de prendre toute la _vue_ disponible (c'est-à-dire prendre tout l'espace dessiné sans scroller par le navigateur pour afficher le site). Ça revient, pour le browser, à avoir une taille explicite (comme si elle était en pixels), et tu peux donc, selon le raisonnement précédent, mettre une hauteur de 100% à tous les parents du div concerné de manière à ce que ledit div puisse avoir lui-même une taille en % choisie, par rapport à la vue du navigateur.

Je vais essayer tout ça
merci

J'ai défini une hauteur de min-height: 1000px à mon "conteneur" (div qui contient tout le tout sauf le fond d'écran). Et dans ce div j'ai un "header" (qui s'avère eêtre une image) auquel j'ai voulu mettre une hauteur de 10% mais ça ne marche pas ...

Et tu as défini height: 100%; à html et body, ou pas ?

Au passage, c'est pas franchement une bonne idée de tout mettre en %.

Non j'ai pas défini de taille à mon body et html.
Je vais essayer

Ah oui pourquoi ?

Ça s'adaptera plus ou moins à la taille de l'écran comme ça et je finirai avec des medias queries. C'est pas bien ?

En général pour du responsive, on définit des points de rupture plutôt, parce que ça se rapproche plus du principe des tailles d'écrans des terminaux.
Tu ne vas pas afficher de la même manière un menu et le contenu principal sur un écran 26" ou sur un téléphone 4" ; on est plus du tout dans un redimensionnement parfaitement proportionnel, sinon l'un des deux écrans est complètement inutilisable. Du coup, tu vois souvent, sur les mobiles, que le menu disparaît pour se compresser, et tout ce qui peut prendre de la place sur le contenu est placé en bas, sous ledit contenu, plutôt qu'à côté (par exemple) sur les versions desktop.
Ça, c'est avec les points de rupture qu'on y arrive : on définit, avec les media queries, qu'à partir de telle ou telle taille (en général les tailles repères des terminaux les plus répandus), le layout ne se redimensionne plus, mais _change_.

Du coup avoir des tailles en % c'est utile, mais à petites doses et en s'assurant d'encadrer le tout par des min- et max-width. La majorité du travail doit se faire sur l'agencement en lui même passés ces breakpoints, pas en le redimensionnant à l'extrême.
Pour les hauteurs en %, c'est encore plus rare parce que c'est pas vraiment intuitif dans des interfaces d'abord calculées horizontalement, mais à moins que tu ais un site qui doit spécialement tenir sur une seule vue, il est en général plus sage de laisser la hauteur s'étendre d'elle-même.