كيفية الحفاظ على تذييلك حيث ينتمي

هذا المنشور متاح أيضًا باللغة الكورية.

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

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

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

هذا يوضح السلوك الذي لا نريده ونريده:

دعونا ننظر إلى نهج لتحقيق ذلك.

الحصول على تذييل الخاص بك تحت السيطرة

index.html و:


 <رئيس>
   
 

 
   
             
 

main.css:

# page-container {
  الموقف: نسبي
  دقيقة الطول: 100 فولت ؛
}
# content-wrap {
  الحشو أسفل: 2.5rem. / * ارتفاع التذييل * /
}
#تذييل {
  الموقف: مطلق ؛
  أسفل: 0؛
  العرض: 100 ٪ ؛
  ارتفاع: 2.5rem. / * ارتفاع التذييل * /
}

إذن ماذا يفعل هذا؟

  • تدور حاوية الصفحة حول كل شيء على الصفحة ، وتعيين الحد الأدنى لارتفاعها إلى 100٪ من ارتفاع منفذ العرض (vh). نظرًا لكونه نسبيًا ، يمكن تعيين عناصره الفرعية مع وضع مطلق يستند إليها لاحقًا.
  • يحتوي التفاف المحتوى على حشو سفلي هو ارتفاع تذييل الصفحة ، مما يضمن ترك مساحة كافية تمامًا للتذييل داخل الحاوية التي يوجد بها كلاهما. يتم استخدام div التفاف هنا والذي سيحتوي على جميع محتويات الصفحة الأخرى.
  • تم تعيين تذييل الصفحة على مطلق ، ويتمسك بالجزء السفلي: 0 من حاوية الصفحة الموجودة بداخله. هذا مهم ، لأنه ليس مطلقًا في إطار العرض ، ولكنه سينتقل إذا كانت حاوية الصفحة أطول من إطار العرض. كما هو مذكور ، يتم استخدام ارتفاعه ، الذي تم ضبطه بشكل تعسفي على 2.5rem هنا ، في التفاف المحتوى فوقه.

وهناك لديك. تذييلك يبقى الآن حيث كنت تتوقع!

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

بالطبع ، هذا هو CSS ، لذلك لن يكتمل بدون بعض اعتبارات UX الخاصة بالهاتف المحمول ، ومنهج بديل يستخدم min-height: 100٪ بدلاً من 100vh. ولكن هذا له عيوبه الخاصة.

إذا كنت مرتاحًا باستخدام Flexbox ، فهناك أيضًا اقتراح رائع لاستخدام المرن في التعليقات ، وهو ما أوصي به.

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

شكرا للقراءة. إليك بعض الأشياء الأخرى التي كتبتها مؤخرًا:

  • اختبار تطبيقات React مع jest و jest-ax و مكتبة اختبار التفاعل
  • دليل المبتدئين لخدمة Amazon للحاويات المرنة