Høydeverktøy

Høydeverktøyene i Tailwind gjenspeiler breddesystemet. Prefikset h-* styrer hvor høyt et element er, med verdier fra den samme avstandsskalaen, brøkverdier og semantiske nøkkelord som De allerede kjenner fra w-*. I motsetning til bredder oppfører høyder seg annerledes i CSS, fordi blokkelementer som regel blir like høye som innholdet sitt som standard – derfor brukes eksplisitte høydeverktøy mer selektivt.

Faste høyder følger den samme avstandsskalaen på 4 piksler per enhet som bredder. h-4 er 16 piksler, h-12 er 48 piksler, og h-96 er 384 piksler. Vanlige bruksområder er knappehøyder (h-10 eller h-12), størrelser på avatarer (h-8 w-8) og skillelinjer (h-px for en linje på 1 piksel). Når De kombinerer h-* og w-* med samme verdi, får De perfekte kvadrater.

h-full setter høyden på et element til 100 % av foreldreelementets høyde. For at dette skal fungere, må foreldreelementet ha en eksplisitt høyde. Dette brukes ofte for klebrige sidefelt, heltebilder eller for å få kort i en flex-rad til å strekke seg til samme høyde. Uten en eksplisitt høyde på foreldreelementet har h-full ingen effekt, siden prosentbaserte høyder krever en dimensjonert forfader.

h-screen setter høyden til 100vh (100 % av visningsområdets høyde), noe som er nyttig for helseksjoner og appskall i fullskjerm. I mobilnettlesere kan adresselinjen føre til at 100vh blir for høyt. Den moderne løsningen er h-dvh (100dvh – dynamisk visningshøyde), som støttes i Tailwind v3.4+ og automatisk tar hensyn til nettlesergrensesnitt som skjules eller vises.

h-auto setter et element tilbake til den naturlige, innholdsbaserte høyden etter at De kan ha satt en fast eller prosentbasert høyde ved et mindre bruddpunkt. For eksempel gir h-48 md:h-auto et kort fast høyde på mobil (egnet for miniatyrbilder i et rutenett), men lar det tilpasse seg naturlig på datamaskiner, der innholdslengden kan variere uten å se unaturlig ut.

h-px setter høyden til nøyaktig 1 piksel, noe som gjør det perfekt for vannrette skillelinjer. Kombinert med w-full bg-gray-200 lager det en ryddig skillelinje som passer inn i designsystemet uten behov for en egendefinert CSS-klasse. De kan også bruke h-0.5 for en linje på 2 piksler når 1 piksel føles for tynt på skjermer med høy pikseltetthet.

På samme måte som de tilsvarende breddeverktøyene tilpasser h-fit størrelsen på et element slik at det passer til innholdet, h-min bruker minimumshøyden for innholdet, og h-max bruker maksimumshøyden for innholdet. Disse trengs sjeldnere enn de tilsvarende breddeverktøyene, fordi høyden vanligvis styres av innholdet uansett. Det viktigste bruksområdet er når et element har fått en fast eller prosentbasert høyde, og De må gå tilbake til innholdsbasert dimensjonering ved et bestemt bruddpunkt.

På samme måte som bredder kan høyder bruke brøkverdier: h-1/2, h-1/3, h-2/3, h-1/4 og h-3/4. Dette er prosentverdier relativt til foreldreelementets høyde. Det fungerer godt i beholdere med fast høyde, for eksempel et kort, et panel eller en del av et appskall, når De vil at underordnede elementer skal oppta en bestemt brøkdel av den tilgjengelige loddrette plassen.

Når innholdet er høyere enn den angitte høyden, flyter det som standard over. Kombiner høydeverktøy med overflow-hidden for å klippe bort innhold, overflow-y-auto for å vise et rullefelt bare når det trengs, eller overflow-y-scroll for alltid å vise rullefeltet. Dette er avgjørende for rullbare sidefelt, chattevinduer og kodeblokker med fast høyde.

Bruk min-h-* for å sikre at et element aldri blir lavere enn en angitt verdi, og max-h-* for å begrense hvor høyt det kan vokse. min-h-screen er et vanlig mønster for layout på sidenivå som skal fylle visningsområdet selv når innholdet er kort. max-h-64 sammen med overflow-y-auto er standard for rullegardinmenyer og valglister som ikke skal bli for høye.

Her er en praktisk kortkomponent som viser høydeverktøy i bruk. Kortet har en fast høyde på miniatyrbildet, et fleksibelt innholdsområde og en bunnseksjon med fast høyde og en handlingsknapp. Dette mønsteret er vanlig i produktlister og bloggindekssider, der visuell konsistens mellom kort med ulik innholdslengde er avgjørende.

I denne leksjonen lærte De: faste h-*-verktøy følger den samme avstandsskalaen som w-*, h-screen fyller visningshøyden, og h-dvh er det moderne, mobiltilpassede alternativet, og min-h-screen sammen med flex-col og flex-1 lager layouter med klebrig bunnseksjon. Neste steg er verktøy for minimums- og maksimumsbegrensninger for både bredde og høyde.