Tata Letak Footer dan Bilah Samping Tetap

Kaki halaman melekat berada di bagian bawah area pandang ketika konten sedikit, tetapi terdorong ke bawah ketika konten banyak. Tantangan historisnya adalah membuat kaki halaman melekat tanpa mengetahui tinggi konten atau menggunakan JavaScript.

Solusi modern paling sederhana: body { display: flex; flex-direction: column; min-height: 100vh; } dan main { flex: 1; }. Konten utama membesar untuk mengisi ruang yang tersedia sehingga mendorong kaki halaman ke bagian bawah, berapa pun panjang kontennya.

Alternatif menggunakan Kisi CSS: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. Kepala halaman mendapatkan tinggi otomatis, konten utama mendapatkan 1fr (mengisi ruang yang tersisa), dan kaki halaman mendapatkan tinggi otomatis. Rapi dan eksplisit — templat barisnya menunjukkan maksud tata letak dengan jelas.

position: sticky; bottom: 0 pada kaki halaman membuatnya melekat di bagian bawah area pandang saat menggulir, tetapi hanya jika konteks penggulirannya mengizinkannya. Cara ini berfungsi untuk kaki halaman di dalam wadah yang dapat digulir, tetapi kurang sesuai untuk kaki halaman tingkat halaman, karena tata letak fleksibel atau kisi lebih rapi.

Tata letak bilah sisi dan konten utama: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. min-width: 0 pada konten utama mencegah item fleksibel meluap dari wadahnya ketika berisi konten yang lebar.

Bilah sisi dengan Kisi: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. Kolom bilah sisi bersifat tetap, sedangkan kolom konten mengisi ruang yang tersisa. Tambahkan baris kepala halaman dengan grid-template-rows: auto 1fr, lalu buat bilah sisi membentang di kedua baris tersebut.

Pada perangkat seluler, susun bilah sisi di atas atau di bawah konten utama: gunakan kueri media untuk beralih dari tata letak kolom kisi menjadi tumpukan satu kolom. Atau gunakan grid-template-columns: min(280px, 30%) 1fr untuk membuat bilah sisi fleksibel yang menyusut pada area pandang yang lebih kecil.

Buat bilah sisi dapat menggulir secara mandiri: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Bilah sisi tetap terlihat saat konten utama digulir, sehingga cocok untuk navigasi atau bilah sisi daftar isi pada halaman konten panjang.

Bilah sisi yang dapat dilipat beralih antara keadaan selebar penuh dan keadaan yang hanya menampilkan ikon. Gunakan properti khusus CSS untuk lebar bilah sisi: --sidebar-width: 280px pada pembungkus, lalu ubah menjadi 64px melalui sebuah kelas. Transisi menganimasikan perubahan lebar dengan mulus.

Bilah sisi dengan posisi tetap (position: fixed; left: 0; top: 0; height: 100vh) mengharuskan konten utama digeser sebesar lebar bilah sisi: main { margin-left: 280px }. Pada perangkat seluler, bilah sisi meluncur menutupi konten, disertai tombol tutup dan lapisan latar belakang.

Tandai bilah sisi navigasi dengan <nav> dan aria-label="Sidebar navigation". Bilah sisi yang dapat dilipat memerlukan tombol pengalih yang aksesibel dengan aria-expanded dan aria-controls. Tautan lewati membantu pengguna papan ketik melewati bilah sisi untuk mencapai konten utama.

Mengapa min-width: 0 perlu ditetapkan pada item fleksibel konten utama dalam tata letak bilah sisi?

Tata letak fleksibel dengan flex: 1 pada konten utama atau kisi tiga baris menghasilkan kaki halaman melekat yang rapi dengan CSS minimal. Tata letak bilah sisi menggunakan definisi kolom tetap atau fleksibel dengan titik henti responsif untuk dilipat pada perangkat seluler. Bilah sisi melekat, lebar yang dapat dilipat, dan atribut ARIA yang aksesibel melengkapi pola bilah sisi dan kaki halaman yang siap digunakan dalam produksi.