Układ przyklejonej stopki i panelu bocznego

Przyklejona stopka pozostaje na dole obszaru roboczego, gdy treść jest krótka, ale przesuwa się w dół wraz z treścią, gdy jest ona długa. Historyczne wyzwanie polegało na przyklejeniu stopki bez znajomości wysokości treści i bez użycia JavaScriptu.

Najprostsze nowoczesne rozwiązanie to body { display: flex; flex-direction: column; min-height: 100vh; } oraz main { flex: 1; }. Główna treść rozciąga się, aby wypełnić dostępną przestrzeń, przesuwając stopkę na dół niezależnie od długości treści.

Alternatywą opartą na CSS Grid jest body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. Nagłówek otrzymuje wysokość auto, główna treść — 1fr (wypełnia pozostałą przestrzeń), a stopka — auto. To czyste i jednoznaczne rozwiązanie — definicja wierszy wyraźnie pokazuje zamierzony układ.

position: sticky; bottom: 0 na stopce przykleja ją do dołu obszaru roboczego podczas przewijania, ale tylko wtedy, gdy pozwala na to jej kontekst przewijania. Rozwiązanie działa w przypadku stopek wewnątrz przewijanego kontenera, ale jest mniej odpowiednie dla przyklejonych stopek na poziomie strony, gdzie Flexbox lub Grid zapewniają prostszy układ.

Układ z paskiem bocznym i główną treścią można zdefiniować za pomocą wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; } oraz main { flex: 1; min-width: 0; }. Wartość min-width: 0 na elemencie main zapobiega przepełnianiu kontenera przez elementy flex zawierające szeroką treść.

Układ paska bocznego z Gridem: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. Kolumna paska bocznego ma stałą szerokość, a kolumna treści wypełnia pozostałą przestrzeń. Aby dodać wiersz nagłówka, użyj grid-template-rows: auto 1fr i rozciągnij pasek boczny na oba wiersze.

Na urządzeniach mobilnych należy zwinąć pasek boczny i umieścić go nad główną treścią albo pod nią: za pomocą media query przełącz układ z kolumnami siatki na stos jednokolumnowy. Można też użyć grid-template-columns: min(280px, 30%) 1fr, aby pasek boczny miał płynną szerokość i zmniejszał się w mniejszych obszarach roboczych.

Aby pasek boczny przewijał się niezależnie, użyj sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Pasek boczny pozostaje widoczny podczas przewijania głównej treści, co sprawdza się w przypadku nawigacji lub pasków bocznych ze spisem treści na stronach z długą treścią.

Zwijany pasek boczny przełącza się między stanem pełnej szerokości a stanem zawierającym tylko ikony. Użyj niestandardowej właściwości CSS do określenia szerokości paska bocznego: --sidebar-width: 280px na wrapperze, a następnie przełącz ją na 64px za pomocą klasy. Przejścia płynnie animują zmianę szerokości.

Stały pasek boczny (position: fixed; left: 0; top: 0; height: 100vh) wymaga odsunięcia głównej treści o szerokość paska bocznego: main { margin-left: 280px }. Na urządzeniach mobilnych pasek boczny wysuwa się nad treść i jest wyposażony w przycisk zamknięcia oraz przyciemnioną warstwę tła.

Paski boczne nawigacji należy oznaczać za pomocą <nav> i aria-label="Sidebar navigation". Zwijane paski boczne wymagają dostępnego przycisku przełączającego z atrybutami aria-expanded i aria-controls. Odnośniki pomijające pomagają użytkownikom klawiatury ominąć paski boczne i przejść do głównej treści.

Flexbox z flex: 1 na elemencie main lub trzywierszowy Grid pozwalają utworzyć przejrzyste przyklejone stopki przy użyciu minimalnej ilości CSS. Układy z paskiem bocznym korzystają ze stałych albo płynnych definicji kolumn oraz responsywnych punktów przełamania, aby zwijać się na urządzeniach mobilnych. Przyklejane paski boczne, zwijane szerokości i dostępne atrybuty ARIA dopełniają gotowe do użycia produkcyjne wzorce pasków bocznych i stopek.