كيف تحافظ على تذييل الصفحة في مكانه؟

تمت الترجمة بواسطة Aicha AIT OUMGHAR

العنصر footer هو آخر عنصر في الصفحة. كحد أدنى، يتواجد الـfooter في الجزء السفلي من منفذ العرض، وقد يتواجد في موضع أقل من ذلك إذا كان محتوى الصفحة أطول من منفذ العرض. يبدو الأمر بسيطا، أليس كذلك ؟؟

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

هناك طريقة سريعة لحل هذا المشكل: تستطيع قطعا موضعة الـfooter في أسفل الصفحة. ولكن هناك جانب سلبي لهذا الفعل. وذلك أنه عندما يكبر المحتوى ليتجاوز منفذ العرض، سيبقى الـfooter عالقا في أسفل منفذ العرض سواء أردنا ذلك أم لا.

هذه الصورة تظهر ما نريده وما لا نريده من الـfooter:

لنلق نظرة على المنهجية التي يجب اتباعها لتحقيق ذلك:

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- بقية محتوى الصفحة هنا -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footerارتفاع الـ */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footerارتفاع الـ */
}

حسنا، ما الذي يفعله هذا الكود أعلاه؟

الـpage-container يحيط بكل ماهو موجود على الصفحة، و يأخذ قيمة ارتفاع دنيوية قيمتها 100% من ارتفاع منفذ العرض (vh). و بما أنه relative - أي نسبي -، فإن العناصر الأبناء الخاصة به يمكنها أخذ قيمة absolute كقيمة للخاصية position لاحقا.
الـcontent-wrap يمتلك padding سفلي تمثل قيمته ارتفاع الـfooter، الأمر الذي سيضمن ترك مساحة كافية تستوعب بالضبط العنصر footer داخل الحاوية التي ستضم هذا الأخير مع باقي المحتوى. هناك عنصر div استخدمناه كغلاف يضم كل بقية المحتوى المتواجد على الصفحة.
العنصر footer أخذ القيمة absolute، و تموضع في أقصى أسفل الحاوية page-container التي يتواجد بداخلها بفضل القيمة bottom: 0. هذا أمر مهم، وذلك لأن الـfooter ليس absolute بالنسبة لمنفذ العرض، ولكنه سيتحرك باتجاه الأسفل عندما يصبح page-container أطول من منفذ العرض. وكما ذكرنا سابقا، فقد حددنا ارتفاعه هنا بقيمة عشوائية قدرها 2.5rem، وهذا الارتفاع اُستعمل كذلك في الـcontent-wrap الذي يوجد فوق هذا الـfooter.

والآن الأمور تسير كما تريد، و الـfooter سيبقى في الموضع الذي تتوقعه.

اللمسات الأخيرة

كما تعلم، أنت تتعامل مع الـCSS، لذلك فكل هذا لن يكون كاملا إذا لم تنتبه لبعض
اعتبارات تجربة المستخدم الخاصة بالأجهزة المحمولة, و تنتبه كذلك لمنهجية بديلة تستخدم الـmin-height: 100% عوض الـ100vh. ولكن هذه الطريقة لها عيوبها الخاصة.

يمكنك استخدام الـFlexbox (مع flex-grow) أو الـGrid ، وكلاهما قويان جدا.

اختيار طريقة من بين هذه الطرق هو أمر متعلق بك وبتفاصيل تصميمك فقط. آمل أن يساعدك المثال أعلاه و الروابط المحال عليها في توفير بعض الوقت عند اتخاذ قرارك و تنفيذه.

كيف تتحكم في الـfooter ؟

اللمسات الأخيرة