Valeurs en pourcentage dans CSS peut être délicat. Lorsque vous réglez la hauteur Propriété CSS d'un élément à 100 % de quoi exactement le réglez-vous à 100 %? C'est la principale question que vous vous posez lorsque vous traitez des pourcentages en CSS, et à mesure que les mises en page deviennent plus complexes, il devient d'autant plus difficile à suivre les pourcentages, ce qui entraîne un comportement carrément bizarre, si vous n'êtes pas minutieux.
Travailler avec des pourcentages présente un avantage certain; les mises en page basées sur des pourcentages s'adaptent automatiquement aux différentes tailles d'écran. C'est pourquoi l'utilisation de pourcentages est essentielle dans le responsive design. Les systèmes de grille populaires et les frameworks CSS utilisent des valeurs de pourcentage pour créer leurs grilles réactives.
De toute évidence, il existe certaines situations mieux adaptées aux valeurs statiques et d'autres qui fonctionnent beaucoup mieux avec quelque chose d'adaptatif, comme les pourcentages. Vous devrez décider de la route à suivre avec les éléments de votre conception.
Unités statiques
Les pixels sont statiques. Dix pixels sur un appareil correspondent à dix pixels sur chaque appareil. Bien sûr, il y a des choses comme la densité et la façon dont un appareil interprète réellement ce qu'est un pixel, mais vous ne verrez jamais de changements majeurs car l'écran est d'une taille différente.
Avec CSS, vous pouvez facilement définir le hauteur en pixels, et il restera le même. C'est prévisible.
div {
hauteur: 20px ;
}
Cela ne changera pas à moins que vous ne le modifiiez avec JavaScript ou quelque chose de similaire.
Maintenant, il y a un autre côté de cette médaille. Cela ne changera pas. Cela signifie que vous devrez tout mesurer avec précision, et même dans ce cas, votre site ne fonctionnera pas sur tous les appareils. C'est pourquoi les unités statiques ont tendance à mieux fonctionner pour les éléments enfants, les médias et les choses qui commenceront à se déformer et à paraître étranges s'ils s'étirent et se développent.
Définition de la hauteur d'un élément à 100 %
Lorsque vous définissez la hauteur d'un élément sur 100 %, s'étend-il sur toute la hauteur de l'écran? Parfois. CSS traite toujours les valeurs en pourcentage comme un pourcentage de l'élément parent.
Sans élément parent
Si vous avez créé un nouveau qui n'est contenu que par la balise body de votre site, 100 % correspondra probablement à la hauteur de l'écran. C'est à moins que vous ayez défini une valeur de hauteur pour le.
Le HTML :
Le CSS :
div {
hauteur: 100 % ;
}
Cette la hauteur de l'élément sera égale à celle de l'écran. Par défaut, le s'étend sur tout l'écran, c'est donc la base que votre navigateur utilise pour calculer la hauteur de l'élément.
Avec un élément parent avec une hauteur statique
Lorsque votre élément est imbriqué dans un autre élément, le le navigateur utilisera la hauteur de l'élément parent pour calculer une valeur de 100 %. Donc, si votre élément est à l'intérieur d'un autre élément qui a une hauteur de 100px, et que vous définissez la hauteur de l'élément enfant à 100%. L'élément enfant aura une hauteur de 100px.
Le HTML :
Le CSS :
#parent {
hauteur: 100px ;
}
#enfant {
hauteur: 100 % ;
}
La hauteur disponible pour l'élément enfant est limitée par la hauteur du parent.
Avec un élément parent avec une hauteur en pourcentage
Cela peut sembler contre-intuitif, mais vous pouvez définir la hauteur d'un élément sur un pourcentage d'un pourcentage. Lorsqu'un élément a un élément parent dont la hauteur est également définie en tant que valeur de pourcentage, le navigateur utilise la même valeur que le parent, qu'il a déjà calculée en fonction de son parent. C'est parce que 100% d'une valeur est toujours cette valeur.
Le CSS :
#parent {
hauteur: 75 % ;
}
#enfant {
hauteur: 100 % ;
}
Dans ce cas, la hauteur de l'élément parent est de 75 % de la totalité de l'écran. L'enfant, alors, est également à 100% de la taille totale disponible.
Avec un élément parent sans hauteur
Fait intéressant, lorsque l'élément parent n'a pas de hauteur définie, le navigateur continuera à monter niveau par niveau jusqu'à ce qu'il trouve une valeur concrète avec laquelle il peut fonctionner. S'il fait tout le chemin jusqu'au sans rien trouver, le navigateur utilisera par défaut la hauteur de l'écran, donnant à votre élément une hauteur équivalente.
Le HTML :
Le CSS :
#parent {}
#enfant {
hauteur: 100 % ;
}
L'élément enfant s'étend jusqu'en haut et en bas de l'écran.
Les unités de fenêtre
Parce que le calcul avec des unités de pourcentage peut être délicat et que chaque élément est lié à son parent, il y a un ensemble d'unités qui ignorent tout cela et les tailles des éléments de base directement à partir de l'écran disponible espace. Ce sont les unités de la fenêtre d'affichage, et elles vous donnent une taille directe basée sur la hauteur ou la largeur d'un écran, quel que soit l'emplacement de l'élément.
Pour définir un élément la taille égale à la hauteur de l'écran, définissez sa valeur de hauteur sur 100vh.
div {
hauteur: 100vh ;
}
Il est facile de casser votre mise en page en faisant cela, et vous devrez savoir quels autres éléments seront impacté, mais la fenêtre d'affichage est de loin le moyen le plus direct de définir la hauteur d'un élément à 100 % de la écran.