كيفية جعل تذييل الصفحة يبقى في الأسفل

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

مشكلة التذييل العائم

عند تصميم تخطيط بسيط يتكون من عمودين، قد تواجه حالة حيث لا يتصرف التذييل كما هو متوقع. ليس غير عادي أن ي FLOAT التذييل بشكل غير مريح في منتصف الصفحة عندما لا يوجد محتوى كافٍ لدفعه إلى الأسفل. بالمقابل، عندما يكون هناك محتوى وفير، يعمل كما هو مقصود - وهذا هو السبب وراء كون العثور على حل مؤقت أو طريقة بديلة يمكن أن يكون محبطًا.

لماذا يعتبر التذييل اللاصق أمرًا ضروريًا

يُحسن وجود تذييل يلتصق في الأسفل من تجربة المستخدم من خلال:

• توفير الوصول السهل إلى الروابط المهمة.
• تحسين الجاذبية العامة.
• ضمان التناسق عبر أحجام الشاشات والأجهزة المختلفة.

الحل: إنشاء تذييل لاصق

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

دليل خطوة بخطوة

1. التفاف المحتوى الخاص بك
   أولاً، تحتاج إلى إنشاء <div> للمحتوى الرئيسي. قم بتعيين اسم فئة له يسمى wrapper.

   <div class="wrapper">
       <!-- محتواك هنا -->
   

2. إضافة div دافعة
   قبل علامة الإغلاق </div> الخاصة بالتغليف، أدخل <div> فارغًا مع اسم فئة push. هذا العنصر سيتأكد من احتساب ارتفاع التذييل.

   <div class="push"></div>
   </div> <!-- نهاية التغليف -->
   

3. إدراج التذييل
   الآن، بعد علامة إغلاق التغليف، قم بإنشاء <div> للتذييل وقم بتعيين اسم فئة لها يسمى footer.

   <div class="footer">
       <!-- محتوى التذييل هنا -->
   </div>
   

الهيكل الكامل لـ HTML

يجب أن يبدو HTML الخاص بك الآن كالتالي:

<div class="wrapper">
    <!-- محتواك هنا -->
    <div class="push"></div>
</div>
<div class="footer">
    <!-- محتوى التذييل هنا -->
</div>

أنماط CSS المطلوبة

لضمان أن يعمل تخطيطك بشكل صحيح، طبق CSS التالي:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* الهامش السفلي هو القيمة السالبة لارتفاع التذييل */
}
.footer, .push {
    height: 142px; /* يجب أن يتطابق .push مع ارتفاع .footer */
}

الأفكار النهائية

مع الخطوات الموضحة أعلاه، يجب أن يكون لديك الآن تذييل لاصق وظيفي يُحسن من قابلية استخدام موقعك. يضمن هذا الإعداد أنه مع تعديل المحتوى الخاص بك، يتصرف تذييلك بشكل يمكن التنبؤ به عبر المتصفحات المختلفة.

تذكر دائمًا اختبار تصميمك في متصفحات متعددة لضمان سلوك ثابت. من خلال تنفيذ هذا الحل، يمكنك تجنب أي مشكلات غير مرغوب فيها في التخطيط وتقديم مظهر مصقول واحترافي لزوارك.

إذا كنت قد استمتعت بهذا الدليل أو كان لديك أي أسئلة، فلا تتردد في ترك تعليق أدناه! سعيد بالبرمجة!