IL "Calc (100%)"È una funzione utilizzata in CSS per applicare determinate proprietà agli elementi HTML secondo le istruzioni matematiche fornite all'interno della funzione. Allo stesso modo, "Altezza: calc (100%)"Viene utilizzato per impostare l'altezza di un determinato elemento. A volte, questa funzione non funziona e non ha alcun impatto sull'output nonostante la sua presenza nell'elemento in stile CSS.

L'errore più comune durante la scrittura del Calc (100%) La funzione per qualsiasi proprietà (come l'altezza o la larghezza) è la mancanza "posizione"Proprietà per l'elemento, la cui altezza deve essere cambiata. Questo è risolto semplicemente aggiungendo un "posizione"Proprietà all'elemento di stile.

Esempio: calc (100%) non funziona
Discutiamo questo problema con l'aiuto di un semplice esempio in cui esiste una proprietà di posizione mancante e consulta l'output:

Altezza: funzione calc (100%)

Questa è la scatola, la cui altezza dovrebbe essere modificata attraverso l'altezza: Calc (100%) Funzione

Nello snippet di codice sopra, c'è un

diretto che dice "funzione calc (100%),"E poi c'è un contenitore div con una semplice istruzione casuale.

Aggiungiamo l'elemento in stile CSS che si riferisce agli elementi HTML sopra e li stile:

.calc
larghezza: calc (100% - 390px);
bordo: 1px nero solido;
Background-color: RGB (63, 218, 197);
Testo-align: centro;
Altezza: calc (100% - 350px);

Nel frammento di codice sopra, ci sono alcune altre proprietà per modellare l'elemento HTML (intestazione e contenuto di classe Div) come bordo, colore di sfondo, allineamento del testo. Quindi, c'è il "Altezza: calc (100% - 350px);".

Quanto segue sarà l'output del codice sopra:

Non possiamo vedere alcun cambiamento nell'altezza dell'elemento div. Significa che l'altezza: la proprietà calc (100%) non funziona.

Modo corretto per aggiungere altezza: funzione calc (100%)

Ora, se aggiungiamo la proprietà di posizione nell'elemento di stile, il codice funzionerà correttamente:

.calc
Posizione: assoluto;
larghezza: calc (100% - 390px);
bordo: 1px nero solido;
Background-color: RGB (63, 218, 197);
Testo-align: centro;
Altezza: calc (100% - 350px);

Nel frammento di codice sopra, abbiamo semplicemente aggiunto una proprietà di posizione e quanto segue sarà l'output dopo aver aggiunto la proprietà di posizione:

Dall'output di cui sopra, possiamo chiaramente comprendere la differenza tra l'output generato attraverso il codice che ha la proprietà di posizione e ciò che manca della proprietà di posizione. Ecco come facciamo l'altezza: Calc (100%) funziona correttamente.

Conclusione

L'errore più comune durante la scrittura della funzione Calc (100%) per l'altezza è probabilmente una proprietà di posizione mancante che porta l'altezza: calc (100%) a non avere alcun impatto sull'output. Questo è risolto facilmente aggiungendo la proprietà di posizione nello stesso elemento di stile CSS di quello in cui è stata aggiunta la funzione Calc (100%) per la proprietà di altezza.