CSS CALC CALC; Vs altezza superiore 100vh;

C'è "NO"Differenza principale nei risultati e nell'esecuzione delle proprietà CSS"Altezza: calc (100vh);" E "Altezza: 100VH;". L'unica differenza è che sono stati scritti in modi diversi. Altrimenti, la funzionalità "altezza: calc (100vh);" fornisce lo stesso di quello fornito da "altezza: 100vh;" e viceversa.

Comprendiamo questo praticamente applicando entrambe le proprietà una per una separatamente.

Come applicare "Altezza: 100vh;" Proprietà in HTML?

Applichiamo il "Altezza: 100VH;"Proprietà a un elemento HTML creando innanzitutto un elemento del contenitore div con un ID assegnato e quindi aggiungendo il selettore ID per applicare la proprietà" Altezza: 100vh "a un elemento del contenitore DIV:

Questo div ha l'altezza che copre lo schermo intero/punto di vista


La proprietà utilizzata in questo è altezza: 100vh;

Nel suddetto snippet del codice HTML:

• UN ""L'elemento contenitore viene aggiunto con il"id"Dichiarato come"mydiv".
• All'interno dell'elemento del contenitore Div, definisci un po 'di testo e specifica il contenitore "".

Ora è necessario aggiungere il "id"Selettore che si riferisce all'elemento HTML aggiunto sopra:

#mydiv
Bordo: 3px Black solido;
Background-color: Powderblue;
imbottitura: 7px;
larghezza: 200px;
Testo-align: centro;
Altezza: 100VH;

L'elemento in stile CSS ha il "id"Selettore che ha alcune proprietà CSS all'interno:

• IL "confine"La proprietà crea un colore nero"3px"Border per il contenitore Div.
• IL "imbottitura"La proprietà definisce lo spazio tra il bordo del div e il contenuto all'interno del div come"7px".
• IL "larghezza"La proprietà definisce la larghezza o la lunghezza orizzontale del contenitore.
• IL "allineamento"La proprietà allinea il contenuto DIV (testo all'interno del Div) al centro del contenitore Div.
• IL "Altezza: 100vh"La proprietà definisce l'altezza o la lunghezza verticale del contenitore Div a" 100 altezza di visualizzazione ". Questa è la proprietà CSS principale da applicare all'elemento HTML qui.

Di conseguenza, l'altezza dell'elemento è definita dall'alto verso il basso che copre l'intera area verticale dello schermo:

Come applicare "Altezza: calc (100vh);" Proprietà in HTML?

Ora, se applichiamo il "Altezza: calc (100vh)"Proprietà allo stesso frammento di codice HTML aggiunto sopra come quanto segue:

Questo div ha l'altezza che copre lo schermo intero/punto di vista


La proprietà utilizzata in questo è l'altezza: calc (100VH);

Nell'elemento in stile CSS, l'unica differenza sarà quella del "altezza"Proprietà che ora è definita come"CALC (100VH)". I punti all'interno del "#mydiv"Il selettore si riferisce alle stesse proprietà applicate nella sezione precedente:

#mydiv

Altezza: calc (100vh);
..

Si può osservare che non vi è alcuna differenza nel risultato prodotto da questo valore, se confrontato con la proprietà (altezza: 100vh):

Questo riassume la funzionalità di entrambi i CSS "Altezza: 100vh" E "Altezza: calc (100vh)" proprietà.

Conclusione

Non vi è alcuna differenza nell'esecuzione e nei risultati del "Altezza: 100vh" E "Altezza: calc (100vh)"Proprietà CSS. Quando una di queste proprietà viene applicata all'elemento in stile CSS, fa sì che l'elemento HTML copra l'intera area verticale dello schermo in base alla sua lunghezza orizzontale. Questo articolo ha spiegato la procedura per applicare i valori delle proprietà di altezza indicati.