Layout med klistrad sidfot och sidofält

En klistrad sidfot ligger längst ned i viewporten när innehållet är kort, men flyttas nedåt när innehållet blir längre. Den historiska utmaningen har varit att få sidfoten att ligga kvar längst ned utan att känna till innehållets höjd eller använda JavaScript.

Den enklaste moderna lösningen är body { display: flex; flex-direction: column; min-height: 100vh; } och main { flex: 1; }. Huvudinnehållet växer och fyller det tillgängliga utrymmet, vilket skjuter sidfoten längst ned oavsett innehållets längd.

Alternativet med CSS Grid är body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. Sidhuvudet får automatisk höjd, main får 1fr och fyller det återstående utrymmet, och sidfoten får automatisk höjd. Det är rent och tydligt — radmallen visar klart layoutens avsikt.

position: sticky; bottom: 0 fäster sidfoten vid viewportens nederkant under rullning, men bara när rullningskontexten tillåter det. Det fungerar för sidfötter inuti en rullande behållare, men är mindre lämpligt för klistrade sidfötter på sidnivå, där Flexbox eller Grid blir renare.

En layout med sidofält och huvudinnehåll kan byggas så här: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. min-width: 0 på main förhindrar att flexobjekt flödar ut ur sin behållare när de innehåller brett innehåll.

Sidofält med Grid: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. Sidofältets kolumn har fast bredd och innehållskolumnen fyller det återstående utrymmet. Lägg till en rubrikrad med grid-template-rows: auto 1fr och låt sidofältet sträcka sig över båda raderna.

På mobila enheter kan sidofältet placeras ovanför eller under huvudinnehållet: använd en media query för att växla från en layout med gridkolumner till en stack med en enda kolumn. Alternativt kan ni använda grid-template-columns: min(280px, 30%) 1fr för ett flexibelt sidofält som krymper på mindre viewportar.

Gör sidofältet rullningsbart separat med sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Sidofältet förblir synligt medan huvudinnehållet rullas, vilket passar bra för navigering eller innehållsförteckningar på sidor med långt innehåll.

Ett infällbart sidofält växlar mellan ett tillstånd med full bredd och ett tillstånd som bara visar ikoner. Använd en CSS-egenskap för sidofältets bredd: --sidebar-width: 280px på wrapper och växla till 64px med hjälp av en klass. Övergångar animerar breddändringen mjukt.

Ett sidofält med fast position (position: fixed; left: 0; top: 0; height: 100vh) kräver att huvudinnehållet förskjuts med sidofältets bredd: main { margin-left: 280px }. På mobila enheter skjuts sidofältet ovanpå innehållet och förses med en stängningsknapp och ett bakgrundslager.

Markera navigeringssidofält med <nav> och aria-label="Sidebar navigation". Infällbara sidofält behöver en tillgänglig växlingsknapp med aria-expanded och aria-controls. Hopplänkar hjälper tangentbordsanvändare att hoppa över sidofält och nå huvudinnehållet.

Flexbox med flex: 1 på main, eller ett grid med tre rader, ger rena klistrade sidfötter med minimal CSS. Sidofältslayouter använder fasta eller flexibla kolumndefinitioner med responsiva brytpunkter för att fällas ihop på mobila enheter. Klistrade sidofält, infällbara bredder och tillgängliga ARIA-attribut kompletterar produktionsklara mönster för sidofält och sidfötter.