Hvordan bruke CSS til å sette høyden på et HTML-element til 100 %

Finn ut hvordan innstilling av høyde med prosenter fungerer i CSS

Prosentverdier i CSS kan være vanskelig. Når du setter høyden CSS-eiendom av et element til 100 %, hva er det du setter det til 100 % av? Det er det store spørsmålet du støter på når du arbeider med prosenter i CSS, og ettersom layouter blir mer komplekse, blir det så mye vanskeligere å holde styr på prosenter, noe som resulterer i en rett og slett bisarr oppførsel, hvis du ikke er forsiktig.

Å jobbe med prosenter har en klar fordel; prosentbaserte oppsett tilpasser seg automatisk til ulike skjermstørrelser. Det er derfor det er viktig å bruke prosenter i responsiv design. Populære rutenettsystemer og CSS-rammeverk bruker prosentverdier for å lage sine responsive rutenett.

Det er klart at det er visse situasjoner som er bedre egnet til statiske verdier og andre som fungerer mye bedre med noe adaptivt, som prosenter. Du må bestemme hvilken vei du skal ta med elementene i designet ditt.

Statiske enheter

Pikslene er statiske. Ti piksler på én enhet er ti piksler på hver enhet. Jada, det er ting som tetthet og måten en enhet faktisk tolker hva en piksel er, men du vil aldri se store endringer fordi skjermen har en annen størrelse.

Med CSS kan du enkelt definere et element høyde i piksler , og det vil forbli det samme. Det er forutsigbart.

|_+_|

Det vil ikke endres med mindre du endrer det med JavaScript eller noe lignende.

Nå er det en annen side ved den mynten. Det vil ikke endre seg. Det betyr at du må måle alt nøyaktig, og selv da vil ikke nettstedet ditt fungere på alle enheter. Det er derfor statiske enheter har en tendens til å fungere bedre for barneelementer, medier og ting som vil begynne å forvrenges og se rart ut hvis de strekker seg og vokser.

Sette et elements høyde til 100 %

Når du setter et elements høyde til 100 %, strekker det seg til hele skjermhøyden? Noen ganger. CSS behandler alltid prosentverdier som en prosentandel av det overordnede elementet.

Uten foreldreelement

Hvis du har laget en fersk som bare er inneholdt av nettstedets body-tag, vil 100 % sannsynligvis tilsvare skjermens høyde. Det er med mindre du definerte en høydeverdi for .

HTML-en:

|_+_|

CSS:

|_+_|

At elementets høyde vil være lik skjermens. Som standard er spenner over hele skjermen, så det er grunnlaget nettleseren din bruker for å beregne elementets høyde.

Med et overordnet element med en statisk høyde

Når elementet ditt er nestet inne i et annet element, vil den nettleser vil bruke det overordnede elementets høyde for å beregne en verdi for 100 %. Så hvis elementet ditt er inne i et annet element som har en høyde på 100px, og du setter underelementets høyde til 100%. Det underordnede elementet vil være 100 px høyt.

HTML-en:

|_+_|

CSS:

|_+_|

Høyden som er tilgjengelig for det underordnede elementet, er begrenset av høyden til overordnet.

Med et overordnet element med en prosentvis høyde

Det kan virke kontraintuitivt, men du kan sette et elements høyde til en prosentandel av en prosentandel. Når et element har et overordnet element som også har sin høyde definert som en prosentverdi, vil nettleseren bruke samme verdi som den overordnede, som den allerede har beregnet basert på den overordnede. Det er fordi 100 % av en verdi fortsatt er den verdien.

|_+_|

CSS:

|_+_|

I dette tilfellet er det overordnede elementets høyde 75 % av hele skjermen. Barnet er da også 100 % av den totale tilgjengelige høyden.

Med et foreldreelement uten høyde

Interessant nok, når det overordnede elementet ikke har en definert høyde, vil nettleseren fortsette å gå opp nivå for nivå til den finner en konkret verdi som den kan jobbe med. Hvis det gjør det helt opp til uten å finne noe, vil nettleseren som standard bruke skjermhøyden, noe som gir elementet en tilsvarende høyde.

HTML-en:

|_+_|

CSS:

|_+_|

Barneelementet strekker seg helt til toppen og bunnen av skjermen.

Viewport-enhetene

Fordi beregning med prosentenheter kan være vanskelig, og hvert element er knyttet til dets overordnede, er det et sett med enheter som ignorerer alt dette og grunnelementstørrelser direkte fra tilgjengelig skjermplass. Dette er viewport-enhetene, og de gir deg en direkte størrelse basert på en skjerms høyde eller bredde, uansett hvor elementet er plassert.

For å angi et elements høyde lik skjermens høyde, sett høydeverdien til 100vh .

|_+_|

Det er lett å bryte oppsettet ditt ved å gjøre dette, og du må være klar over hvilke andre elementer som vil bli påvirket, men visningsporten er den klart mest direkte måten å sette et elements høyde til 100 % av skjermen.