لا يمكن تشغيل تذييل CSS Sticky.ما الخطأ الذي افعله؟

Question

حسنًا، هذه أول مشاركة لي هنا وأستمتع حقًا بالموقع.

لقد بدأت تشغيل موقع أساسي جدًا (قبيح كالخطيئة) ولسبب ما، لا يمكنني جعل تذييل CSS Sticky يعمل مع FireFox.يعمل IE لكن FF يعرضه في منتصف الصفحة.

عنوان URL هو http://dev.aipoker.co.uk

أعلم أنني يجب أن أقوم بالتطوير في FF وإصلاح الأخطاء في IE لذلك أعتقد أنني ربما ارتكبت خطأ بالفعل وبطريقة ما يعمل هذا في IE ولكن ليس في أي مكان آخر.

هل يمكن لأي شخص أن يساعدني في إخراجي من بؤسي من فضلك؟

شكرا يا شباب وبنات.

Answer 1

حساب ، وأنها تعمل بشكل جيد على فايرفوكس.

وراجع للشغل، يجب عليك الاستماع إلى البودكاست Boagworld إذا كنت لا بالفعل. انها رائعة! :)

وابتهاج.

Answer 2

لقد حققت نجاحًا مع رمز مثل هذا:

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

Answer 3

الحد الأدنى من التغييرات التي يمكنني رؤيتها للقيام بذلك سيكون:

• حرك قسم التذييل داخل الجسم
• تعيين الموضع المطلق على كل من النص وقسم التذييل
• اضبط القاع = 0 بكسل على قسم التذييل

والذي ينتهي بشيء مثل هذا في رأسك:

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>

Answer 4

وهذا هو على كل ما تحتاج إلى معرفته حول المغلق فقط الهوامش لزجة وnavs لزجة:

والتمسك السفلي من الصفحة

Position: absolute;
top:auto;
bottom: 0;

والتمسك السفلي من الشاشة

Position: fixed;
top:auto;
bottom:0;

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

ويمكنك تطبيق نفس الأسلوب إلى التصفح لزجة من قبل التقليب السيارات وأعلى. It'sis عبر متصفح متوافق (من الذاكرة من IE7 وما فوق) بما في ذلك الهواتف النقالة.