Wysokość CSS CALC; Vs wysokość top 100VH;

Jest "NIE„Główna różnica w wynikach i wykonaniu właściwości CSS”Wysokość: calc (100 VH);" I "Wysokość: 100 VH;". Jedyną różnicą jest to, że zostały napisane na różne sposoby. W przeciwnym razie funkcjonalność „wysokość: calc (100vh);” dostarcza to samo, co dostarczone przez „Wysokość: 100 VH”; i wzajemnie.

Rozumiemy to praktycznie, stosując obie nieruchomości jeden po drugim osobno.

Jak zastosować „Wysokość: 100 VH;” Własność w Html?

Zastosujmy „Wysokość: 100 VH;„Właściwość do elementu HTML, najpierw tworząc element kontenera Div z przypisanym do niego identyfikatorem, a następnie dodając selektor identyfikatora, aby zastosować właściwość„ Wysokość: 100VH ”do elementu kontenera Div:

Ta div ma wysokość, która obejmuje pełny ekran/punkt widzenia


Właściwość użyta w tym jest wysokość: 100 VH;

W powyższym fragmencie kodu HTML:

• A "„Element kontenera jest dodawany z„ID”Zadeklarowane jako„MyDiv".
• Wewnątrz elementu kontenera Div zdefiniuj trochę tekstu i określ kontener „”.

Teraz konieczne jest dodanie „ID”Selektor odnoszący się do elementu HTML dodanego powyżej:

#MYDIV
Border: 3px Solid Black;
kolor tła: proszek;
Wyściółka: 7px;
szerokość: 200px;
Text-Align: Center;
Wysokość: 100 VH;

Element stylu CSS ma „ID„Selektor, który ma w środku niektóre właściwości CSS:

• „„granica„Nieruchomość tworzy czarny kolor”3px„Granica pojemnika Div.
• „„wyściółka„Własność określa przestrzeń między granicą Div a treścią wewnątrz Div jako„7px".
• „„szerokość„Własność określa szerokość lub długość poziomą pojemnika.
• „„tekst-align„Właściwość wyrównuje treść div (tekst wewnątrz div) do środka kontenera Div.
• „„Wysokość: 100 VH„Własność określa wysokość lub długość pionową kontenera Div do„ Wysokości 100 rzutni ”. Jest to główna właściwość CSS, którą należy zastosować do elementu HTML tutaj.

W rezultacie wysokość elementu jest zdefiniowana od góry do dołu, pokrywając cały obszar pionowy ekranu:

Jak zastosować „wysokość: calc (100 VH);” Własność w Html?

Teraz, jeśli zastosujemy „Wysokość: calc (100 vh)„Właściwość do tego samego fragmentu kodu HTML, co dodano powyżej, jak następujące:

Ta div ma wysokość, która obejmuje pełny ekran/punkt widzenia


Właściwość użyta w tym jest wysokość: calc (100 VH);

W elemencie stylu CSS jedyną różnicą będzie „z„wysokość„Własność, która jest teraz zdefiniowana jako„Calc (100 VH)". Kropki w „#MYDIV„Selektor odnosi się do tych samych właściwości, które są stosowane w poprzedniej sekcji:

#MYDIV

Wysokość: calc (100 VH);
…

Można zaobserwować, że nie ma różnicy w wyniku wytworzonym przez tę wartość, w porównaniu z drugą (wysokością: 100 V):

To podsumowuje funkcjonalność obu CSS ”Wysokość: 100 VH" I "Wysokość: calc (100 vh)" nieruchomości.

Wniosek

Nie ma różnicy w wykonaniu i wynikach „Wysokość: 100 VH" I "Wysokość: calc (100 vh)”Właściwości CSS. Gdy którekolwiek z tych właściwości są nałożone do elementu stylu CSS, sprawia, że ​​element HTML pokrywa cały obszar pionowy ekranu. W tym artykule wyjaśniono procedurę zastosowania wartości właściwości wysokości.