Sabit Alt Bilgi ve Kenar Çubuğu Yerleşimi

Yapışkan alt bilgi, içerik kısa olduğunda görünüm alanının alt kısmında kalır; içerik uzun olduğunda ise içerikle birlikte aşağı itilir. Geçmişteki zorluk, içerik yüksekliğini bilmeden veya JavaScript kullanmadan alt bilgiyi sabitlemekti.

En basit modern çözüm: body { display: flex; flex-direction: column; min-height: 100vh; } ve main { flex: 1; }. Ana içerik, kullanılabilir alanı dolduracak şekilde büyür ve içerik uzunluğu ne olursa olsun alt bilgiyi en alta iter.

CSS ızgarası alternatifi: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. Üst bilgi otomatik yüksekliğe, ana içerik 1fr değerine (kalan alanı doldurur), alt bilgi ise otomatik yüksekliğe sahip olur. Temiz ve açıktır — satır şablonu düzen amacını net biçimde gösterir.

position: sticky; bottom: 0 kullanıldığında alt bilgi kaydırma sırasında görünüm alanının altına sabitlenir; ancak bu yalnızca kaydırma bağlamı izin verdiğinde gerçekleşir. Kaydırılan bir kapsayıcının içindeki alt bilgiler için işe yarar; flexbox veya ızgaranın daha temiz olduğu sayfa düzeyindeki yapışkan alt bilgiler için daha az uygundur.

Kenar çubuğu ve ana içerikten oluşan bir düzen: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. Ana içerikteki min-width: 0, geniş içerik barındıran esnek öğelerin kapsayıcılarından taşmasını önler.

Izgara kenar çubuğu: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. Kenar çubuğu sütunu sabittir; içerik sütunu kalan alanı doldurur. Bir üst bilgi satırı eklemek için grid-template-rows: auto 1fr kullanın ve kenar çubuğunu her iki satıra yayabilir.

Mobilde kenar çubuğunu ana içeriğin üstüne veya altına daraltın: bir medya sorgusuyla sütunlu ızgara düzeninden tek sütunlu yığına geçin. Alternatif olarak, daha küçük görünüm alanlarında daralan akışkan bir kenar çubuğu için grid-template-columns: min(280px, 30%) 1fr kullanın.

Bir kenar çubuğunun bağımsız olarak kaydırılmasını sağlayın: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Ana içerik kaydırılırken kenar çubuğu görünür kalır; bu, uzun içerik sayfalarındaki gezinti veya içindekiler kenar çubukları için idealdir.

Daraltılabilir bir kenar çubuğu, tam genişlikli durum ile yalnızca simgelerin gösterildiği durum arasında geçiş yapar. Kenar çubuğu genişliği için bir CSS özel özelliği kullanın: sarmalayıcıda --sidebar-width: 280px; bir sınıf aracılığıyla 64px değerine geçin. Geçişler, genişlik değişikliğini akıcı biçimde canlandırır.

Sabit konumlu bir kenar çubuğu (position: fixed; left: 0; top: 0; height: 100vh), ana içeriğin kenar çubuğu genişliği kadar ötelenmesini gerektirir: main { margin-left: 280px }. Mobilde kenar çubuğu, kapatma düğmesi ve arka plan katmanıyla içeriğin üzerine kayar.

Gezinti kenar çubuklarını <nav> ve aria-label="Sidebar navigation" ile işaretleyin. Daraltılabilir kenar çubukları, aria-expanded ve aria-controls özelliklerine sahip erişilebilir bir geçiş düğmesi gerektirir. Atlama bağlantıları, klavye kullanıcılarının kenar çubuklarını atlayarak ana içeriğe ulaşmasına yardımcı olur.

Kenar çubuğu düzeninde ana içerik esnek öğesinde min-width: 0 neden ayarlanmalıdır?

Ana içerikte flex: 1 kullanılan esnek kutu düzeni veya üç satırlı bir ızgara, çok az CSS ile temiz yapışkan alt bilgiler oluşturur. Kenar çubuğu düzenleri, mobilde daraltılmak için duyarlı kırılma noktalarıyla sabit ya da akışkan sütun tanımları kullanır. Yapışkan kenar çubukları, daraltılabilir genişlikler ve erişilebilir ARIA öznitelikleri, üretime hazır kenar çubuğu ve alt bilgi örüntülerini tamamlar.