CSS `hauteur: calc (100vh);` Vs `hauteur: 100vh;`
Je travaille sur un projet où l'ancien développeur a utilisé:
.main-sidebar {
height: calc(100vh);
}
Je n'ai plus aucun moyen de le contacter et j'aimerais comprendre quelle est la différence (le cas échéant) entre les deux méthodes.
(Est-ce le bon endroit pour poser cette question?)
Il n'y a pas de différence, car chaque fois que l'expression calc(100vh) est calculée, elle finit toujours par être 100vh.
VH height: 100vh; Signifie que la hauteur de cet élément est égale à 100% de la hauteur de la fenêtre d'affichage.
exemple: height: 50vh;
Si la hauteur de votre écran est de 1000 pixels, la hauteur de votre élément sera égale à 500 pixels (50% de 1000 pixels).
CALC height: calc(100% - 100px); calculera la taille de l'élément en utilisant la valeur de l'élément.
exemple:height: calc(100% - 100px); Si la hauteur de votre écran est de 1000 pixels, la hauteur de votre élément sera égale à 900 pixels (100% de 1000 pixels et moins 100 pixels).
* Je pense que votre ancien développeur n'avait pas besoin d'utiliser calc() s'il ne voulait pas calculer la valeur.
La fonction CSS calc () vous permet d'effectuer des calculs lors de la spécification des valeurs des propriétés CSS
vous voudrez peut-être faire référence à ceci https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_calc
(La raison pour laquelle l'ancien développeur a utilisé cela peut être qu'il l'utilise conventionnellement partout et qu'il serait plus facile d'ajouter des calculs par la suite)
Fondamentalement, la fonction calc () permet d'utiliser des expressions mathématiques avec addition (+), soustraction (-), multiplication (*) et division (/) comme valeurs de composant.
Maintenant, dans votre cas, les deux sont identiques car vous n'avez utilisé aucun calcul. Vous pouvez donc utiliser la hauteur: 100vh
Un cas d'utilisation courant est qu'au début, il a soustrait l'en-tête ou tout autre élément. calc (100vh - 80px).