Layout med sticky footer og sidebar

En sticky-sidefod bliver ved med at være nederst i visningsområdet, når indholdet er kort, men skubbes ned sammen med indholdet, når det er langt. Den historiske udfordring har været at få sidefoden til at sidde fast uden at kende indholdets højde eller bruge JavaScript.

Den enkleste moderne løsning er: body { display: flex; flex-direction: column; min-height: 100vh; } og main { flex: 1; }. Hovedindholdet vokser, så det udfylder den tilgængelige plads, og skubber sidefoden ned i bunden uanset indholdets længde.

Et alternativ med CSS Grid er: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. Sidehovedet får automatisk højde, hovedindholdet får 1fr og udfylder den resterende plads, og sidefoden får automatisk højde. Det er rent og tydeligt — rækkeskabelonen viser klart hensigten med layoutet.

position: sticky; bottom: 0 på sidefoden fastgør den til bunden af visningsområdet under rulning, men kun når dens rullekontekst tillader det. Det fungerer for sidefødder i en rullende beholder, men er mindre velegnet til sticky-sidefødder på sideniveau, hvor Flexbox eller Grid giver et renere layout.

Et layout med sidebjælke og hovedindhold: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. min-width: 0 på hovedindholdet forhindrer flex-elementer i at løbe over deres beholder, når de indeholder bredt indhold.

Sidebjælke med Grid: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. Sidebjælkekolonnen har fast bredde, mens indholdskolonnen udfylder den resterende plads. Tilføj en række til sidehovedet med grid-template-rows: auto 1fr, og lad sidebjælken spænde over begge rækker.

På mobilen kan du placere sidebjælken over eller under hovedindholdet: brug en medieforespørgsel til at skifte fra et layout med gitterkolonner til en stak i én kolonne. Du kan også bruge grid-template-columns: min(280px, 30%) 1fr til en fleksibel sidebjælke, der bliver smallere på mindre visningsområder.

Få en sidebjælke til at rulle uafhængigt: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Sidebjælken bliver i visningen, mens hovedindholdet ruller, hvilket er ideelt til navigations- eller indholdsfortegnelsessidebjælker på sider med langt indhold.

En sammenklappelig sidebjælke skifter mellem en tilstand med fuld bredde og en tilstand med kun ikoner. Brug en CSS-brugerdefineret egenskab til sidebjælkens bredde: --sidebar-width: 280px på wrapperen, og skift til 64px via en klasse. Overgange animerer ændringen i bredden jævnt.

En sidebjælke med fast position (position: fixed; left: 0; top: 0; height: 100vh) kræver, at hovedindholdet forskydes med sidebjælkens bredde: main { margin-left: 280px }. På mobilen glider sidebjælken ind over indholdet med en lukkeknap og en baggrundsoverlejring.

Markér navigationssidebjælker med <nav> og aria-label="Sidebar navigation". Sammenklappelige sidebjælker kræver en tilgængelig skifteknap med aria-expanded og aria-controls. Spring-over-links hjælper tastaturbrugere med at springe forbi sidebjælker og nå hovedindholdet.

Flexbox med flex: 1 på hovedindholdet eller et gitter med tre rækker giver rene sticky-sidefødder med minimal CSS. Sidebjælkelayouts bruger faste eller fleksible kolonnedefinitioner med responsive brudpunkter, så de kan klappes sammen på mobilen. Sticky-sidebjælker, sammenklappelige bredder og tilgængelige ARIA-attributter fuldender produktionsklare mønstre for sidebjælker og sidefødder.