CSS Høydeberegnet; Vs høyde topp 100VH;

Det er "NEI”Stor forskjell i resultatene og utførelsen av CSS -egenskapene”Høyde: Calc (100VH);”Og“Høyde: 100VH;”. Den eneste forskjellen er at de er skrevet på forskjellige måter. Ellers funksjonaliteten "Høyden: Calc (100VH);" gir er det samme som levert av "Høyden: 100VH;" og vice versa.

La oss forstå dette praktisk ved å bruke begge egenskapene en etter en separat.

Hvordan bruke "høyde: 100VH;" Eiendom i HTML?

La oss bruke “Høyde: 100VH;”Eiendom til et HTML -element ved først å opprette et DIV -containerelement med en ID tildelt det og deretter legge til ID -velgeren for å bruke egenskapen“ Høyde: 100VH ”på et DIV -containerelement:

Denne diven har høyden som dekker fullskjerm/synspunkt


Eiendommen som brukes i dette er høyde: 100VH;

I ovennevnte HTML -kodeutdrag:

• En "”Containerelement tilsettes med“id”Erklært som“mydiv”.
• Inne i Div Container -elementet, definer litt tekst og spesifiser "" -beholderen.

Nå er det pålagt å legge til “id”Valg som refererer til HTML -elementet lagt til ovenfor:

#mydiv
Border: 3px solid svart;
Bakgrunnsfarge: PowderBlue;
polstring: 7px;
Bredde: 200px;
tekst-align: sentrum;
Høyde: 100VH;

CSS -stilelementet har "id”Valg som har noen CSS -egenskaper inne:

• “grense”Eiendom skaper en svartfarget”3px”Grense for Div Container.
• “polstring”Eiendom definerer rommet mellom grensen til div og innholdet inne i Div som“7px”.
• “bredde”Eiendom definerer bredden eller den horisontale lengden på beholderen.
• “Tekstalign”Eiendom justerer Div -innholdet (tekst inne i DIV) til sentrum av DIV -beholderen.
• “Høyde: 100VH”Eiendom definerer høyden eller den vertikale lengden på DIV -beholderen til“ 100 Viewporthøyde ”. Dette er den viktigste CSS -egenskapen som skal brukes på HTML -elementet her.

Som et resultat er høyden på elementet definert fra toppen til bunnen som dekker hele det vertikale området på skjermen:

Hvordan du bruker "høyde: kalk (100VH);" Eiendom i HTML?

Nå, hvis vi bruker “Høyde: Calc (100VH)”Eiendom til samme HTML -kodebit som lagt til ovenfor som følgende:

Denne diven har høyden som dekker fullskjerm/synspunkt


Eiendommen som brukes i dette er høyde: Calc (100VH);

I CSS -stilelementet vil den eneste forskjellen være den for "høyde”Eiendom som nå er definert som“Calc (100VH)”. Prikkene inne i “#mydiv”Selector refererer til de samme egenskapene som brukes i forrige seksjon:

#mydiv

Høyde: Calc (100VH);
..

Det kan observeres at det ikke er noen forskjell i resultatet produsert av denne verdien, sammenlignet med den andre (høyde: 100VH) egenskap:

Dette oppsummerer funksjonaliteten til begge CSS “Høyde: 100VH”Og“Høyde: Calc (100VH)" egenskaper.

Konklusjon

Det er ingen forskjell i utførelsen og resultatene av “Høyde: 100VH”Og“Høyde: Calc (100VH)”CSS -egenskaper. Når noen av disse egenskapene brukes på CSS -stilelementet, gjør det HTML -elementet til å dekke hele det vertikale området på skjermen i henhold til den horisontale lengden. Denne artikkelen forklarte prosedyren for å anvende de oppgitte eiendomsverdiene.