“Calc (100%)”Er en funksjon som brukes i CSS for å anvende visse egenskaper på HTML -elementer i henhold til de matematiske instruksjonene gitt i funksjonen. På samme måte, "Høyde: Calc (100%)”Brukes til å sette høyden på et bestemt element. Noen ganger kjører ikke denne funksjonen og har ingen innvirkning på utgangen til tross for dens tilstedeværelse i CSS -stilelementet.

Den vanligste feilen mens du skriver Calc (100%) funksjon for enhver eiendom (som høyde eller bredde) er den manglende “posisjon”Eiendom for elementet, hvis høyde må endres. Dette løses ved å bare legge til en "posisjon”Eiendom til stilelementet.

Eksempel: Calc (100%) fungerer ikke
La oss diskutere dette problemet ved hjelp av et enkelt eksempel der det er en eiendomsegenskap og se utdataene:

Høyde: Calc (100%) funksjon

Dette er boksen, hvis høyde skal endres gjennom høyden: Calc (100%) Funksjon

I ovennevnte kodebit er det en

overskrift som sier “Calc (100%) funksjon,”Og så er det en div container med en enkel tilfeldig uttalelse.

La oss legge til CSS -stilelementet som refererer til de ovennevnte HTML -elementene og stil dem:

.Calc
Bredde: Calc (100% - 390px);
Grense: 1px solid svart;
bakgrunnsfarge: RGB (63, 218, 197);
tekst-align: sentrum;
Høyde: Calc (100% - 350px);

I ovennevnte kodebit er det noen andre egenskaper for å style HTML -elementet (overskrift og div klasseinnhold) som grense, bakgrunnsfarge, tekstjustering. Deretter er det "Høyde: Calc (100% - 350px);”.

Følgende vil være utdataene fra ovennevnte kode:

Vi kan ikke se noen endring i høyden på DIV -elementet. Det betyr at høyden: Calc (100%) eiendom ikke fungerer.

Riktig måte å legge til høyde: beregnet (100%) funksjon

Hvis vi legger til posisjonsegenskapen i stilelementet, vil koden fungere ordentlig:

.Calc
Posisjon: Absolutt;
Bredde: Calc (100% - 390px);
Grense: 1px solid svart;
bakgrunnsfarge: RGB (63, 218, 197);
tekst-align: sentrum;
Høyde: Calc (100% - 350px);

I ovennevnte kodebit la vi bare til en posisjonsegenskap, og følgende vil være utdataene etter å ha lagt til posisjonsegenskapen:

Fra output ovenfor kan vi tydelig forstå forskjellen mellom utdataene som genereres gjennom koden som har posisjonsegenskapen og den som mangler posisjonsegenskapen. Slik får vi høyden: Calc (100%) fungerer ordentlig.

Konklusjon

Den vanligste feilen mens du skriver Calc (100%) -funksjonen for høyde, er sannsynligvis en manglende posisjonsegenskap som fører høyden: Calc (100%) til ikke å ha noen innvirkning på utgangen. Dette løses enkelt ved bare å legge til posisjonsegenskapen i samme CSS -stilelement som der Calc (100%) -funksjonen for høydeegenskapen er lagt til.