Le "calc (100%)"Est une fonction utilisée dans CSS pour appliquer certaines propriétés aux éléments HTML selon les instructions mathématiques données à l'intérieur de la fonction. De la même manière, "hauteur: calc (100%)”Est ​​utilisé pour définir la hauteur d'un certain élément. Parfois, cette fonction ne fonctionne pas et n'a aucun impact sur la sortie malgré sa présence dans l'élément de style CSS.

L'erreur la plus courante en écrivant le calc (100%) La fonction pour toute propriété (comme la hauteur ou la largeur) est la manquante "position”Propriété pour l'élément, dont la hauteur doit être modifiée. Ceci est résolu en ajoutant simplement un «position”Propriété à l'élément de style.

Exemple: calc (100%) ne fonctionne pas
Discutons de ce problème à l'aide d'un exemple simple où il y a une propriété de position manquante et voyez la sortie:

Hauteur: Fonction Calc (100%)

Il s'agit de la boîte, dont la hauteur doit être modifiée à travers la hauteur: Calc (100%) Fonction

Dans l'extrait de code ci-dessus, il y a un

En tête qui dit "Fonction Calc (100%),"Et puis il y a un conteneur Div avec une simple déclaration aléatoire.

Ajoutons l'élément de style CSS qui fait référence aux éléments HTML ci-dessus et les styliser:

.calc
Largeur: calc (100% - 390px);
Border: 1px noir solide;
Color en arrière-plan: RVB (63, 218, 197);
Texte-aligne: Centre;
hauteur: calc (100% - 350px);

Dans l'extrait de code ci-dessus, il existe d'autres propriétés pour styliser l'élément HTML (cap et contenu de la classe div) comme la bordure, la couleur d'arrière-plan, l'alignement du texte. Ensuite, il y a le «hauteur: calc (100% - 350px);".

Ce qui suit sera la sortie du code ci-dessus:

Nous ne pouvons voir aucun changement dans la hauteur de l'élément div. Cela signifie que la propriété Hauteur: Calc (100%) ne fonctionne pas.

Façon correcte d'ajouter de la hauteur: Fonction Calc (100%)

Maintenant, si nous ajoutons la propriété de position dans l'élément de style, le code fonctionnera correctement:

.calc
Position: absolue;
Largeur: calc (100% - 390px);
Border: 1px noir solide;
Color en arrière-plan: RVB (63, 218, 197);
Texte-aligne: Centre;
hauteur: calc (100% - 350px);

Dans l'extrait de code ci-dessus, nous avons simplement ajouté une propriété de position et ce qui suit sera la sortie après avoir ajouté la propriété de position:

D'après la sortie ci-dessus, nous pouvons clairement comprendre la différence entre la sortie générée par le code qui a la propriété de position et ce qui n'a pas la propriété de position. C'est ainsi que nous faisons la hauteur: Calc (100%) fonctionne correctement.

Conclusion

L'erreur la plus courante lors de l'écriture de la fonction Calc (100%) pour la hauteur est probablement une propriété de position manquante qui conduit la hauteur: calc (100%) pour ne pas avoir d'impact sur la sortie. Ceci est résolu facilement en ajoutant simplement la propriété de position dans le même élément de style CSS que celle où la fonction Calc (100%) pour la propriété de hauteur a été ajoutée.