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

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

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

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

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

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

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

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

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

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

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

وهناك لديك. يبقى تذييل الصفحة الآن في المكان الذي تتوقعه!

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

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

يمكن أيضًا استخدام Flexbox (مع النمو المرن) أو الشبكة ، وكلاهما قوي جدًا.

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

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

  • دليل المبتدئين لخدمة Amazon Elastic Container Service
  • اختبار التفاعل مع Jest و Enzyme