Procentvärden i CSS kan vara knepigt. När du ställer in höjden CSS-egendom av ett element till 100% vad ställer du exakt in det till 100% av? Det är den stora frågan du stöter på när du hanterar procentsatser i CSS, och när layouter blir mer komplexa, det blir så mycket svårare att hålla reda på procentsatser, vilket resulterar i något direkt bisarrt beteende, om du inte är det försiktig.
Att arbeta med procentsatser har en tydlig fördel; procentbaserade layouter anpassas automatiskt till olika skärmstorlekar. Det är därför det är viktigt att använda procentsatser i responsiv design. Populära nätsystem och CSS-ramar använder procentvärden för att skapa sina lyhörda nät.
Det är uppenbart att det finns vissa situationer som passar bättre för statiska värden och andra som fungerar mycket bättre med något adaptivt, som procentsatser. Du måste bestämma vilken väg du ska ta med elementen i din design.
Statiska enheter
Pixlar är statiska. Tio pixlar på en enhet är tio pixlar på varje enhet. Visst, det finns saker som densitet och hur en enhet faktiskt tolkar vad en pixel är, men du kommer aldrig att se stora förändringar eftersom skärmen har en annan storlek.
Med CSS kan du enkelt definiera ett element höjd i pixlaroch det kommer att förbli detsamma. Det är förutsägbart.
div {
höjd: 20px;
}
Det kommer inte att ändras om du inte ändrar det med JavaScript eller något liknande.
Nu finns det en annan sida av det myntet. Det kommer inte att förändras. Det betyder att du måste mäta allt exakt, och även då kommer din webbplats inte att fungera på alla enheter. Det är därför som statiska enheter tenderar att fungera bättre för barnelement, media och saker som kommer att börja snedvrida och se konstiga ut om de sträcker sig och växer.
Ställa in elementets höjd till 100%
När du ställer in elementets höjd till 100%, sträcker det sig till hela skärmhöjden? Ibland. CSS behandlar alltid procentvärden som en procentandel av det överordnade elementet.
Med inget överordnat element
Om du har skapat en ny som bara ingår i din webbplats kroppstagg, kommer 100% troligen att motsvara skärmens höjd. Det är om du inte definierade ett höjdvärde för.
HTML:
CSS:
div {
höjd: 100%;
}
Det där elementets höjd är lika med skärmens. Som standard är spänner över hela skärmen, så det är den grund som din webbläsare använder för att beräkna elementets höjd.
Med ett överordnat element med en statisk höjd
När ditt element är kapslat i ett annat element, webbläsare använder det överordnade elementets höjd för att beräkna ett värde på 100%. Så om ditt element finns i ett annat element som har en höjd på 100 pixlar och du ställer in barnelementets höjd till 100%. Barnelementet kommer att vara 100 pixlar högt.
HTML:
CSS:
#förälder {
höjd: 100px;
}
#barn {
höjd: 100%;
}
Den tillgängliga höjden för barnelementet begränsas av förälderns höjd.
Med ett överordnat element med en procentuell höjd
Det kan verka kontraintuitivt, men du kan ställa in elementets höjd till en procentandel av en procent. När ett element har ett överordnat element som också har sin höjd definierat som ett procentvärde, kommer webbläsaren att använda samma värde som det överordnade, som det redan beräknat baserat på dess överordnade. Det beror på att 100% av ett värde fortfarande är det värdet.
CSS:
#förälder {
höjd: 75%;
}
#barn {
höjd: 100%;
}
I det här fallet är det överordnade elementets höjd 75% av hela skärmen. Barnet är då också 100% av den totala tillgängliga höjden.
Med ett överordnat element utan höjd
Intressant är att när det överordnade elementet inte har en definierad höjd fortsätter webbläsaren att gå upp nivå för nivå tills den hittar ett konkret värde som den kan arbeta med. Om det gör det hela vägen upp till utan att hitta någonting kommer webbläsaren som standard att skärmhöjden, vilket ger ditt element en motsvarande höjd.
HTML:
CSS:
#förälder {}
#barn {
höjd: 100%;
}
Barnelementet sträcker sig hela vägen till toppen och botten av skärmen.
Viewport-enheterna
Eftersom beräkning med procentenheter kan vara svårt och varje element är knutet till sin förälder, det finns en uppsättning enheter som ignorerar allt detta och baselementstorlekar direkt från den tillgängliga skärmen Plats. Det här är visningsenheterna och de ger dig en direkt storlek baserat på skärmens höjd eller bredd, oavsett var elementet finns.
För att ställa in ett element höjd lika med skärmens höjd, ställ in dess höjdvärde till 100vh.
div {
höjd: 100vh;
}
Det är lätt att bryta din layout genom att göra detta, och du måste vara medveten om vilka andra element som kommer att vara påverkas, men visningsområdet är överlägset det mest direkta sättet att ställa in elementets höjd till 100% av skärm.