Højde-utilities

Hjælpeværktøjer til højde i Tailwind afspejler systemet for bredde. Præfikset h-* styrer, hvor højt et element er, med værdier fra den samme afstandsskala, brøkstørrelser og semantiske nøgleord, som du allerede kender fra w-*. I modsætning til bredder opfører højder sig anderledes i CSS, fordi blok-elementer som standard typisk er lige så høje som deres indhold — derfor bruges eksplicitte højde-hjælpeværktøjer mere selektivt.

Faste højder følger den samme afstandsskala på 4 px pr. enhed som bredder. h-4 er 16 px, h-12 er 48 px, og h-96 er 384 px. Almindelige anvendelser omfatter knaphøjder (h-10 eller h-12), avatarstørrelser (h-8 w-8) og adskillelseslinjer (h-px til en linje på 1 px). Hvis du kombinerer h-* med w-* med samme værdi, får du perfekte kvadrater.

h-full sætter et elements højde til 100 % af det overordnede elements højde. For at det kan fungere, skal det overordnede element have en eksplicit højde. Det bruges ofte til fastklæbende sidebjælker, hero-billeder eller til at få kort i en flex-række til alle at strække sig til samme højde. Uden en eksplicit højde på det overordnede element har h-full ingen effekt, fordi procentvise højder kræver et størrelsesfastsat overordnet element.

h-screen sætter højden til 100vh (100 % af visningsområdets højde), hvilket er nyttigt til hero-sektioner i fuld skærm og app-strukturer. På mobilbrowsere kan adresselinjen få 100vh til at flyde over. Den moderne løsning er h-dvh (100dvh — dynamisk visningsområdehøjde), som Tailwind v3.4+ understøtter, og som automatisk tager højde for sammenklappelige elementer i browserens brugerflade.

h-auto sætter et element tilbage til dets naturlige, indholdsstyrede højde, efter at du måske har angivet en fast eller procentvis højde ved et mindre brudpunkt. For eksempel giver h-48 md:h-auto et kort en fast højde på mobil (godt til miniaturebilleder i et gitter), men lader det tilpasse sig naturligt på skrivebordet, hvor indholdets længde kan variere uden at se uhensigtsmæssig ud.

h-px sætter højden til præcis 1 px, hvilket gør det perfekt til vandrette adskillelses- og separatorlinjer. Kombineret med w-full bg-gray-200 skaber det en enkel adskillelse, der passer til designsystemet uden behov for en brugerdefineret CSS-klasse. Du kan også bruge h-0.5 til en linje på 2 px, når 1 px virker for tyndt på skærme med høj pixeltæthed.

Ligesom deres modstykker for bredde tilpasser h-fit et elements størrelse til dets indhold, h-min bruger den mindste indholdshøjde, og h-max bruger den største indholdshøjde. De er mindre nødvendige end deres modstykker for bredde, fordi højden typisk styres af indholdet i forvejen. Det vigtigste anvendelsesområde er, når et element har fået en fast eller procentvis højde, og du ved et bestemt brudpunkt har brug for at vende tilbage til indholdsstyring.

Ligesom bredder kan højder bruge brøkværdier: h-1/2, h-1/3, h-2/3, h-1/4 og h-3/4. Det er procentværdier i forhold til det overordnede elements højde. Det fungerer godt i containere med fast højde, f.eks. et kort, et panel eller en sektion i en app-struktur, hvor du ønsker, at underordnede elementer skal optage en bestemt brøkdel af den tilgængelige lodrette plads.

Når indholdet er højere end den angivne højde, flyder det som standard over. Kombiner hjælpeværktøjer til højde med overflow-hidden for at beskære indholdet, overflow-y-auto for kun at tilføje et rullepanel efter behov eller overflow-y-scroll for altid at vise rullepanelet. Det er afgørende for rullelige sidebjælker, chatvinduer og kodeblokke med fast højde.

Brug min-h-* for at sikre, at et element aldrig bliver lavere end en bestemt værdi, og max-h-* for at begrænse, hvor højt det kan vokse. min-h-screen er et almindeligt mønster til layout på sideniveau, der skal udfylde visningsområdet, selv når indholdet er kort. max-h-64 sammen med overflow-y-auto er standard til rullemenuer og valglister, der ikke må vokse sig for høje.

Her er en praktisk kortkomponent, der viser hjælpeværktøjer til højde i praksis. Kortet har en fast højde på miniaturebilledet, et fleksibelt indholdsområde og en sidefod med fast højde og en handlingsknap. Dette mønster er almindeligt i produktlister og oversigtssider til blogs, hvor visuel ensartethed mellem kort med forskellig indholdslængde er afgørende.

I denne lektion lærte du, at faste h-*-hjælpeværktøjer følger den samme afstandsskala som w-*, at h-screen udfylder visningsområdets højde, og at h-dvh er det moderne, mobilsikre alternativ, og at min-h-screen sammen med flex-col og flex-1 skaber layouts med fastklæbende sidefod. Næste gang ser vi på hjælpeværktøjer til minimums- og maksimumsbegrænsninger for både bredde og højde.