تخطيط تذييل جانبي ثابت

يبقى التذييل الثابت في أسفل إطار العرض عندما يكون المحتوى قصيرًا، لكنه يتحرك إلى الأسفل مع المحتوى عندما يكون طويلًا. ويتمثل التحدي التاريخي في جعل التذييل ثابتًا من دون معرفة ارتفاع المحتوى أو استخدام JavaScript.

أبسط حل حديث هو: body { display: flex; flex-direction: column; min-height: 100vh; } وmain { flex: 1; }. يتمدد المحتوى الرئيسي لملء المساحة المتاحة، فيدفع التذييل إلى الأسفل بغض النظر عن طول المحتوى.

البديل باستخدام CSS Grid هو: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. يحصل الرأس على ارتفاع تلقائي، ويحصل المحتوى الرئيسي على 1fr لملء المساحة المتبقية، ويحصل التذييل على ارتفاع تلقائي. هذا الأسلوب واضح وصريح؛ إذ يوضح قالب الصفوف نية التخطيط بجلاء.

يؤدي استخدام position: sticky; bottom: 0 في التذييل إلى تثبيته في أسفل إطار العرض أثناء التمرير، ولكن فقط عندما يسمح سياق التمرير بذلك. ينجح هذا الأسلوب مع التذييلات الموجودة داخل حاوية قابلة للتمرير، لكنه أقل ملاءمة للتذييلات الثابتة على مستوى الصفحة، حيث يكون Flexbox أو Grid أنظف.

لتخطيط يتكون من شريط جانبي ومحتوى رئيسي، استخدم wrapper { display: flex; } وsidebar { width: 280px; flex-shrink: 0; } وmain { flex: 1; min-width: 0; }. تمنع min-width: 0 في العنصر الرئيسي عناصر Flex من تجاوز حاويتها عند احتوائها على محتوى عريض.

لتخطيط شريط جانبي باستخدام Grid، استخدم: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. يكون عمود الشريط الجانبي ثابتًا، بينما يملأ عمود المحتوى المساحة المتبقية. أضف صفًا للرأس باستخدام grid-template-rows: auto 1fr، مع جعل الشريط الجانبي يمتد عبر الصفين.

على الأجهزة المحمولة، اطوِ الشريط الجانبي ليظهر أعلى المحتوى الرئيسي أو أسفله: استخدم استعلامًا وسطيًا للتبديل من تخطيط أعمدة باستخدام Grid إلى تكديس في عمود واحد. أو استخدم grid-template-columns: min(280px, 30%) 1fr لإنشاء شريط جانبي مرن يتقلص في إطارات العرض الأصغر.

لجعل الشريط الجانبي قابلًا للتمرير بشكل مستقل، استخدم: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. يبقى الشريط الجانبي ظاهرًا أثناء تمرير المحتوى الرئيسي، ما يجعله مناسبًا لأشرطة التنقل الجانبية أو أشرطة فهرس المحتويات في صفحات المحتوى الطويل.

يتبدل الشريط الجانبي القابل للطي بين حالة بعرض كامل وحالة تعرض الأيقونات فقط. استخدم خاصية CSS مخصصة لعرض الشريط الجانبي: --sidebar-width: 280px في الحاوية، ثم بدّلها إلى 64px عبر class. وتحرّك الانتقالات تغيير العرض بسلاسة.

يتطلب الشريط الجانبي ذي الموضع الثابت (position: fixed; left: 0; top: 0; height: 100vh) إزاحة المحتوى الرئيسي بمقدار عرض الشريط الجانبي: main { margin-left: 280px }. على الأجهزة المحمولة، ينزلق الشريط الجانبي فوق المحتوى مع زر إغلاق وطبقة خلفية حاجبة.

حدّد أشرطة التنقل الجانبية باستخدام <nav> وaria-label="Sidebar navigation". تحتاج الأشرطة الجانبية القابلة للطي إلى زر تبديل يمكن الوصول إليه، مزودًا بـ aria-expanded وaria-controls. تساعد روابط التخطي مستخدمي لوحة المفاتيح على تجاوز الأشرطة الجانبية والوصول إلى المحتوى الرئيسي.

لماذا يجب ضبط min-width: 0 في عنصر المحتوى الرئيسي ضمن تخطيط Flex الذي يحتوي على شريط جانبي؟

يحقق Flexbox مع استخدام flex: 1 في العنصر الرئيسي، أو شبكة مكونة من ثلاثة صفوف، تذييلات ثابتة بتنسيق CSS محدود. تستخدم تخطيطات الأشرطة الجانبية تعريفات أعمدة ثابتة أو مرنة مع نقاط توقف متجاوبة للطي على الأجهزة المحمولة. وتكمل الأشرطة الجانبية الثابتة والعروض القابلة للطي وسمات ARIA التي تتيح الوصول أنماط الأشرطة الجانبية والتذييلات الجاهزة للإنتاج.