Percentage waarden in CSS kan lastig zijn. Wanneer u de hoogte instelt CSS-eigenschap van een element op 100% waar zet je het precies op 100% van? Dat is de belangrijkste vraag waar je tegenaan loopt bij het omgaan met percentages in CSS, en naarmate lay-outs complexer worden, wordt het wordt het zo veel moeilijker om percentages bij te houden, wat resulteert in ronduit bizar gedrag, als je dat niet bent voorzichtig.
Het werken met percentages heeft een duidelijk voordeel; op percentages gebaseerde lay-outs passen zich automatisch aan verschillende schermformaten aan. Daarom is het gebruik van percentages essentieel bij responsive design. Populaire rastersystemen en CSS-frameworks gebruiken percentagewaarden om hun responsieve rasters te maken.
Het is duidelijk dat er bepaalde situaties zijn die beter geschikt zijn voor statische waarden en andere die veel beter werken met iets adaptiefs, zoals percentages. U moet beslissen welke route u moet nemen met de elementen in uw ontwerp.
Statische eenheden
Pixels zijn statisch. Tien pixels op één apparaat is tien pixels op elk apparaat. Natuurlijk zijn er dingen als dichtheid en de manier waarop een apparaat interpreteert wat een pixel is, maar je zult nooit grote veranderingen zien omdat het scherm een ander formaat heeft.
Met CSS kunt u eenvoudig de elementen van een element definiëren hoogte in pixels, en het blijft hetzelfde. Het is voorspelbaar.
div {
hoogte: 20px;
}
Dat zal niet veranderen tenzij je het verandert met JavaScript of iets dergelijks.
Nu, er is een andere kant aan die medaille. Het zal niet veranderen. Dat betekent dat je alles precies moet meten, en zelfs dan zal je site niet op alle apparaten werken. Daarom werken statische eenheden meestal beter voor onderliggende elementen, media en dingen die gaan vervormen en er vreemd uitzien als ze uitrekken en groeien.
De hoogte van een element instellen op 100%
Als u de hoogte van een element instelt op 100%, strekt dit zich dan uit over de volledige schermhoogte? Soms. CSS behandelt procentwaarden altijd als een percentage van het bovenliggende element.
Zonder bovenliggend element
Als je een nieuwe hebt gemaakt die alleen wordt weergegeven door de body-tag van uw site, is 100% waarschijnlijk gelijk aan de hoogte van het scherm. Dat wil zeggen, tenzij u een hoogtewaarde hebt gedefinieerd voor de.
De HTML-code:
De CSS:
div {
hoogte: 100%;
}
Dat de hoogte van het element is gelijk aan die van het scherm. Standaard is de beslaat het volledige scherm, dus dat is de basis die uw browser gebruikt bij het berekenen van de hoogte van het element.
Met een bovenliggend element met een statische hoogte
Wanneer uw element in een ander element is genest, wordt de browser zal de hoogte van het bovenliggende element gebruiken om een waarde voor 100% te berekenen. Dus als je element zich in een ander element bevindt met een hoogte van 100px, en je stelt de hoogte van het onderliggende element in op 100%. Het onderliggende element wordt 100px hoog.
De HTML-code:
De CSS:
#ouder {
hoogte: 100px;
}
#kind {
hoogte: 100%;
}
De hoogte die beschikbaar is voor het onderliggende element wordt beperkt door de hoogte van het bovenliggende element.
Met een bovenliggend element met een hoogtepercentage
Het lijkt misschien contra-intuïtief, maar u kunt de hoogte van een element instellen op een percentage van een percentage. Als een element een bovenliggend element heeft waarvan de hoogte ook als een percentage is gedefinieerd, gebruikt de browser dezelfde waarde als het bovenliggende element, die al is berekend op basis van het bovenliggende element. Dat komt omdat 100% van een waarde nog steeds die waarde is.
De CSS:
#ouder {
hoogte: 75%;
}
#kind {
hoogte: 100%;
}
In dit geval is de hoogte van het bovenliggende element 75% van het volledige scherm. Het kind is dan ook 100% van de totale lengte beschikbaar.
Met een bovenliggend element zonder hoogte
Interessant is dat wanneer het bovenliggende element geen gedefinieerde hoogte heeft, de browser niveau voor niveau omhoog blijft gaan totdat het een concrete waarde vindt waarmee het kan werken. Als het helemaal tot aan de zonder iets te vinden, zal de browser standaard de schermhoogte instellen, waardoor uw element een equivalente hoogte krijgt.
De HTML-code:
De CSS:
#ouder {}
#kind {
hoogte: 100%;
}
Het onderliggende element loopt helemaal door tot aan de boven- en onderkant van het scherm.
De Viewport-eenheden
Omdat berekening met percentage-eenheden lastig kan zijn en elk element aan zijn bovenliggende element is gekoppeld, er is een reeks eenheden die dat allemaal negeren en de grootte van basiselementen direct buiten het beschikbare scherm ruimte. Dit zijn de viewport-eenheden en ze geven u een directe grootte op basis van de hoogte of breedte van een scherm, ongeacht waar het element zich bevindt.
Om een element in te stellen hoogte gelijk is aan de hoogte van het scherm, stel de hoogtewaarde in op 100vh.
div {
hoogte: 100vh;
}
Het is gemakkelijk om je lay-out hierdoor te breken, en je moet weten welke andere elementen dat zullen zijn beïnvloed, maar de viewport is verreweg de meest directe manier om de hoogte van een element in te stellen op 100% van de scherm.