Verktyg för höjd

Height-utilities i Tailwind speglar breddsystemet. Prefixet h-* styr hur högt ett element är, med värden från samma spacing-skala, bråktalsstorlekar och semantiska nyckelord som ni redan känner till från w-*. Till skillnad från bredder fungerar höjder annorlunda i CSS, eftersom blockelement vanligtvis blir lika höga som sitt innehåll som standard — därför används explicita height-utilities mer selektivt.

Fasta höjder följer samma spacing-skala på 4 px per enhet som bredder. h-4 är 16 px, h-12 är 48 px och h-96 är 384 px. Vanliga användningsområden är knapparnas höjd (h-10 eller h-12), avatarstorlekar (h-8 w-8) och avdelarlinjer (h-px för en linje på 1 px). Om ni kombinerar h-* med w-* med samma värde får ni perfekta kvadrater.

h-full anger ett elements höjd till 100 % av förälderns höjd. För att detta ska fungera måste föräldern ha en explicit höjd. Det används ofta för sticky sidopaneler, hero-bilder eller för att få kort i en flexrad att sträckas till samma höjd. Utan en explicit höjd på föräldern har h-full ingen effekt, eftersom procentuella höjder kräver en storleksbestämd ancestor.

h-screen anger höjden till 100vh (100 % av viewportens höjd), vilket är användbart för hero-sektioner som täcker hela skärmen och appskal. I mobila webbläsare kan adressfältet göra att 100vh ger overflow. Den moderna lösningen är h-dvh (100dvh — dynamisk viewporthöjd), som stöds i Tailwind v3.4+ och automatiskt tar hänsyn till webbläsarens hopfällbara gränssnittselement.

h-auto återställer ett element till dess naturliga, innehållsstyrda höjd efter att ni kan ha angett en fast eller procentuell höjd vid en mindre breakpoint. Exempelvis ger h-48 md:h-auto ett kort en fast höjd på mobiler (bra för bildminiatyrer i ett rutnät), men låter det anpassa sig naturligt på datorer där innehållets längd kan variera utan att se konstigt ut.

h-px anger höjden till exakt 1 px, vilket gör den perfekt för horisontella avdelare och separatorlinjer. Tillsammans med w-full bg-gray-200 skapar den en ren avdelare som passar designsystemet utan att ni behöver en anpassad CSS-klass. Ni kan också använda h-0.5 för en linje på 2 px när 1 px känns för tunt på skärmar med hög pixeltäthet.

Precis som motsvarande width-utilities anpassar h-fit ett element efter innehållet, använder h-min den minsta innehållshöjden och h-max den största innehållshöjden. Dessa behövs mer sällan än motsvarande width-utilities, eftersom höjden vanligtvis ändå styrs av innehållet. Det viktigaste användningsområdet är när ett element har fått en fast eller procentuell höjd och ni behöver återgå till innehållsstyrd storlek vid en specifik breakpoint.

Precis som bredder kan höjder använda bråktalsvärden: h-1/2, h-1/3, h-2/3, h-1/4 och h-3/4. Dessa är procentuella värden i förhållande till förälderns höjd. Det fungerar bra i behållare med fast höjd, till exempel ett kort, en panel eller en sektion i ett appskal, där ni vill att underordnade element ska ta upp en bestämd andel av det tillgängliga vertikala utrymmet.

När innehållet är högre än den angivna höjden får det som standard overflow. Kombinera height-utilities med overflow-hidden för att klippa innehåll, overflow-y-auto för att lägga till en rullningslist endast när det behövs eller overflow-y-scroll för att alltid visa rullningslisten. Detta är viktigt för rullningsbara sidopaneler, chattfönster och kodblock med fast höjd.

Använd min-h-* för att säkerställa att ett element aldrig blir lägre än ett visst värde och max-h-* för att begränsa hur högt det kan växa. min-h-screen är ett vanligt mönster för layouter på sidnivå som ska fylla viewporten även när innehållet är kort. max-h-64 tillsammans med overflow-y-auto är standard för dropdown-menyer och urvalslistor som inte ska växa sig för höga.

Här är en praktisk kortkomponent som visar height-utilities i praktiken. Kortet har en fast höjd för miniatyrbilden, ett flexibelt innehållsområde och en footer med fast höjd och en åtgärdsknapp. Det här mönstret är vanligt i produktlistningar och bloggindex där visuell enhetlighet mellan kort med varierande innehållslängd är avgörande.

I den här lektionen lärde ni er: h-* fixed utilities follow the same spacing scale as w-*, h-screen fills the viewport height and h-dvh is the mobile-safe modern alternative och min-h-screen with flex-col and flex-1 creates sticky footer layouts. Härnäst utforskar vi utilities för minimi- och maximibegränsningar för både bredd och höjd.