• 0

كيف أنشئ footer بشكل ديناميكي؟

أقوم ببرمجة موقع باستعمال bootstrap، وأواجه مشكل في جزء footer حيث لا يتأقلم وعرض الشاشة بشكل صحيح، وإليكم الكود:

كود html:

<div class="footer navbar-fixed-bottom">
        <div class="container text-right">
            <div id="socialMedia">
            </div>
        </div>
    </div>

كود ملف التنسيق css:

html {
 height: 100%;
 box-sizing: border-box;
 }

 *,
 *:before,
 *:after {
 box-sizing: inherit;
  }

  body {
  position: relative;
  margin: 0;
  padding:0;
  min-height: 100%;
  margin-bottom:-50px;
     }

   .footer {
   position: absolute;
   right: 0;
   bottom:0;
   left: 0;
   padding:0;
   background-color:#333;
   width:100%;
   height:50px;
   margin-bottom:0px;

}  

ألاحظ أن الشكل العام لجزء من footer لا يظهر بشكل جيد على معظم الأجهزة، فأين يكمن المشكل؟ وما الحل؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

الخطأ الوحيد في كودك هو استعمالك لـ absoulute عوض relative.

عملت على تصحيح الكود ليكون بالشكل التالي:

.bodyContent {
  position:relative;
  padding:20px;
  margin-bottom:50px;
}

.footer {
   position: relative;
   background-color:#333;
   width:100%;
   height:50px;
   margin-bottom:0px;
} 

خاصية position في ملف التنسيق css تتعلق بتموضع العنصر داخل العنصر المحتوي له، وتمتلك أربع قيم من الممكن أن تأخذها كقيم:

  • static
  • relative
  • fixed
  • absolute

The position Property

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن