Je suis actuellement en train d'essayer de créer un site responsive.
Je rencontre cependant un petit problème, j'ai donc une <section> qui a une height définie de 100% et des <article> qui ont une height de 45%. Cette même <section>, n'englobe pas tous mes <article>, (je le vois avec l'inspecteur d'élément, la <section> se finit avant mon dernier <article>.
D'après ce que j'ai lu et constaté, cela pourrait venir du fait qu'il faut que ma <section> est une hauteur définie et non une hauteur en pourcentage. Cependant, je ne désire pas utiliser de px car je suis justement à la recherche du responsive.
Après quelques recherches, j'ai bien tenté l'utilisation de l'unité vh mais cela ne semble pas fonctionner.
Ensuite, vouloir définir des hauteurs est globalement une mauvaise idée. Tes articles font la hauteur de leur propre contenu, et ta section doit en faire autant. Laisse les libres, d'autant que là aussi, la hauteur et le responsive, c'est un faux sujet : les gens scrolleront verticalement.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Je te remercie tout d'abord pour cet article fort intéressant.
J'ai du mal à comprendre pourquoi définir une hauteur est un problème en soi, dans mon cas, j'ai trois <article> qui représentent trois cadres et que j'aimerais donc de même hauteur.
Par ailleurs, je suis actuellement entrain de m'intéresser à ce cours-ci : https://openclassrooms.com/courses/prenez-en-main-bootstrap/mise-en-route-8 ainsi qu'aux media queries. Ceci dit, dans l'article donné, le % est présenté en tant que mauvaise idée et plus globalement non "responsive", mais aurais-tu des liens récents pour créer un site responsive ?
Parce que maitriser le contenu est difficile, tout simplement. C'est un cas qui arrive très fréquemment quand on code depuis une maquette, où tout est calibré, mais aucun test avec du contenu réel ne se présente.
Voilà par exemple un cas fréquent de ce qu'on veut obtenir : https://jsfiddle.net/35mbrsvr/ là, ça semble très bien. Sauf que ça fonctionne tout de suite moins bien avec un cas concret, à savoir du texte qui va varier : https://jsfiddle.net/35mbrsvr/1/ Et même si on se débrouille pour que ça fasse toujours le même nombre de lignes, si un utilisateur zoome ou utilise une typo de base plus grosse pour des raisons de lisibilité, tout part en steak, parce qu'en fonction de la taille du zoom ou du texte, des retours à la ligne vont commencer à apparaitre sur certains blocs de texte mais pas d'autres, etc.
Et là-dessus, qu'est-ce qu'il se passe si on met une hauteur fixe pour essayer de régler le problème ? https://jsfiddle.net/35mbrsvr/2/
Bref, ça apporte beaucoup plus de problèmes que de solutions.
Si tu veux que tes éléments aient une hauteur similaire entre eux, tu peux te tourner vers flexbox ou grid.
J'ai lu ton message il y a un moment et j'avoue avoir oublié de te répondre.
Un grand merci pour ta réponse :). Cela m'aide beaucoup !
Création d'un site responsive : Hauteur (height)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !