كيف تحصل على التذييل المثبت (Sticky Footer) بنهاية الصفحة بإستخدام CSS
Ahmed AbuelfatehAhmed Abuelfateh

كيف تحصل على التذييل المثبت (Sticky Footer) بنهاية الصفحة بإستخدام CSS

تعلم كيفية تصميم صفحة ويب بإستخدام لغة الترميز HTML وتنسيقات CSS، تحتوي على التذييل المثبت - Sticky Footer، في نهاية الصفحة، تثبيت الخاتمة (التذييل - Footer) في نهاية الصفحة، حتى إذا كان محتوى الصفحة قليل، أو دفع تذييل الصفحة إلى أسفل الصفحة إذا كان المحتوى قليل، وذلك بدون إستخدام أكواد JavaScript

للحصول على تذييل مثبت أو ما يسمى بـ Sticky Footer، يوجد طريقتين لعمل ذلك، إحداهما تعمل على معظم المتصفحات، والأخرى لا تعمل إلا على المتصفحات الحديثة التي تدعم الخاصية flex، ولذلك سوف نقوم بشرح الطريقة القديمة التي تعمل على معظم المتصفحات.

كل ما تحتاج إليه من أكواد الـ HTML هو إضافة عنصرين بداخل محتوى الملف <body> وسوف نقوم بإختيار نوع العنصر <div> وسوف نختار له معرف id وسوف نختار له إسم container، ثم بداخل هذا العنصر سوف نقسمه إلى قسمين القسم الأول وهو ما سوف نضع به كل محتويات الصفحة ما عدا التذييل footer، والقسم الثاني سوف نضع فيه العنصر الثاني وسوف يكون أيضا من النوع <div> وسوف نختار له معرف id وقيمته تساوي push_footer، وهذا العنصر لن يحتوي على أي شيء (عنصر فارغ)، وبعد ذلك سوف نضيف التذييل footer، والكود التالي سوف يوضح أكثر المقصود بذلك

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Sticky Footer</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.abuelfateh.com/css/normalize.min.css" />
  <style type="text/css">
    body, html {height: 100%;}
    #container {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -200px; /* إرتفاع التذييل بالسالب */
    }
    #push_footer {
      height: 200px; /* قيمة ثابتة */
    }
    header {
      height: 100px;
      width: 100%;
      background: #0fade2;
    }
    footer {
      height: 200px; /* قيمة ثابتة */
      background: #a6a6a6;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="container">
    <header>
      <h1>التذييل المثبت</h1>
    </header>
    <section>
      <!-- محتويات الصفحة -->
    </section>
    <div id="push_footer"></div>
  </div>
  <footer>.....</footer>
</body>
</html>

من الكود السابق، يتوجب عليك أولا إعطاء القيمة 100% للخاصية height الخاصة بالعنصرين <html> و <body> وذلك حتى يتم حجز كامل الإرتفاع للصفحة (document)، وبعد ذلك يجب تحديد قيمة ثابته لإرتفاع التذييل، في هذا المثال ثبتنا إرتفاع التذييل لـ 200px وسوف نضع نفس القيمة للعنصر <div id="push_footer"> ثم بالنسبة للمعرف id المسمى container سوف تلاحظ أننا كتبنا الخاصية height مرتين وذلك لدعم أكثر من متصفح، فكل متصفح سوف يطبق القيمة التي تم برمجته على تطبيقها لحجز كامل الإرتفاع للصفحة، ثم بعد ذلك يجب تحديد قيمة الخاصية margin-bottom بالقيمة السالبة لإرتفاع التذييل والتي تم تحديدها في المثال بـ -200px، وفي هذا المثال حددنا قيمتها من خلال كتابة الإسم المختصر للخاصية margin والتي يتم تطبيقها margin:Top Left/Right Bottom; ويمكن أيضا تطبيقها منفصلة margin:Left Top Right Bottom; وبذلك تكون قد حصلت على تذييل ثابت (Sticky Footer) حتى وإن كانت محتويات الصفحة غير كافية لوضح التذييل في نهاية الصفحة، ويمكنك مشاهدة مثال على ذلك من خلال زيارة صفحة البحث في الموقع https://abuelfateh.com/search/. أو يمكنك نسخ الأكواد السابقة ووضعها في ملف HTML لتجربة الأكواد.

في المثال السابق إستخدمنا الملف normalize.min.css لـ إعادة ضبط التنسيقات الإفتراضية للمتصفح (CSS Reset)، يمكنك قراءة الموضوع، أو يمكنك إضافة التنسيق * {margin:0;} لإعادة ضبط التنسيقات الإفتراضية للمتصفح.

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

7911

التعليقات

    • أضف تعليق جديد
    • رمز التحقق
      رمز التحقق

    • ارسل لي إشعارات بالتعليقات التالية بواسطة البريد الإلكتروني.

    بإستخدامك لهذا الموقع فإنك توافق على سياسة إستخدام ملفات تعريف الإرتباط.