Ik werk aan een project waarbij de voormalige ontwikkelaar het volgende gebruikte:
.main-sidebar {
height: calc(100vh);
}
Ik kan op geen enkele manier meer contact met hem/haar opnemen en ik zou graag willen weten wat het verschil (indien aanwezig) is tussen de twee methoden.
(Is dit de juiste plaats om deze vraag te stellen?)
Antwoord 1, autoriteit 100%
Er is geen verschil, want elke keer dat de uitdrukking calc(100vh)wordt berekend, wordt deze altijd 100vh.
Antwoord 2, autoriteit 98%
VH
height: 100vh;betekent dat de hoogte van dit element gelijk is aan 100% van de viewport-hoogte.
voorbeeld:
height: 50vh;
Als uw schermhoogte 1000px is, is uw elementhoogte gelijk aan 500px (50% van 1000px).
CALC
height: calc(100% - 100px);berekent de grootte van het element door de waarde van het element te gebruiken.
voorbeeld:
height: calc(100% - 100px);
Als uw schermhoogte 1000 px is, is de hoogte van uw element gelijk aan 900 px (100% van 1000 px en min 100 px).
*Ik denk dat je voormalige ontwikkelaar calc()niet hoefde te gebruiken als hij/zij geen waarde wilde berekenen.
Antwoord 3, autoriteit 36%
Met de CSS-functie calc() kunt u berekeningen uitvoeren bij het opgeven van CSS-eigenschapswaarden
misschien wil je dit doorverwijzen
Pad
(De reden waarom de voormalige ontwikkelaar dit gebruikte, kan zijn dat hij het gewoonlijk overal gebruikt en dat het gemakkelijker zou zijn om achteraf berekeningen toe te voegen)
Antwoord 4, autoriteit 21%
In principe staat de functie calc() toe dat wiskundige uitdrukkingen met optellen (+), aftrekken (-), vermenigvuldigen (*) en delen (/) worden gebruikt als componentwaarden.
In jouw geval zijn beide hetzelfde, aangezien je geen enkele berekening hebt gebruikt. Dus je kunt hoogte gebruiken: 100vh
Antwoord 5, autoriteit 14%
Een veelvoorkomend gebruik is dat hij eerst de header of een ander element aftrok.
calc(100vh – 80px).