تذييل في أسفل الصفحة أو المحتوى ، أيهما أقل

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

حل Flexbox

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

رمز CSS

جسم { الارتفاع: 100 ٪ الهامش: 0 ؛ الحشو: 0 ؛ } #main-wrapper { العرض: فليكس. الاتجاه المرن: العمود ؛ MINIight: 100 ٪ ؛ } شرط { المرن: 1 ؛ }

في هذا الإعداد ، فإن عنصر #-wrapper هو حاوية Flexbox ، ويحتوي على توجيه مرن إلى العمود ، مما يعني أنه سيتم تكديس عناصر عموديًا. يحتوي عنصر المقالة على Flex: 1 ، مما يجعله يشغل المساحة المتبقية التي لم يتم تناولها من قبل الرأس والملاحة. ومع ذلك ، عندما يكون المحتوى محدودًا ، يتقلص المقالة ، وينتقل تذييل التذييل ديناميكيًا إلى أسفل نافذة المتصفح ، حيث يضمن ذلك عنصر #-Wrapper Min-Min-Min-Min-Leaight دائمًا ملء منفذ العرض.