موقف تذييل CSS التمسك أسفل المتصفح؟

https://stackoverflow.com/questions/2571573

24-09-2019
|

سؤال

أواجه مشكلة في موقعي http://artygirl.co.uk/pixie/about/ لا يمكنني أن أحصل على تذييل التذييل تلقائيًا إلى أسفل المتصفح ، وإظهار بقية خلفيتي. هل هناك حل أفضل من استخدام الموضع: ثابت أم مطلق؟

أعتقد أن هناك أنماطًا أخرى تزيد عن بعض الاختبارات التي أجريها في Firebug.

شكرا لمساعدتك تحياتي جودي

المحلول

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

يمكنك استخدام القليل من JavaScript لزيادة min-height إذا كان لدى شخص ما منفذ عرض ضخم ولكن هذا لا يزال أقل من الأنيقة. لست متأكدًا مما إذا كان هناك حل CSS فقط لهذا.

إذا كنت تريد تجربة الرمز أعلاه ، فقد نشرته للتو هنا: هل الكشف عن وجود شريط التمرير مع jQuery لا يزال صعبا؟ قد تكون مفيدة لك.

نصائح أخرى

CSS:

.podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

لغة البرمجة:

<div class="podbar">
    Put your footer here
</div>

سيؤدي ذلك إلى إنشاء لزجة ستظهر دائمًا في أسفل الصفحة وتراكب كل شيء. فقط أضف هامش/حشوة إضافية إلى أسفل divs الحاوية الرئيسية تساوي ارتفاع تذييل +5px لذلك لا يتراكب المحتوى الخاص بك.

يعمل في كل متصفح اختبرته.

لقد استخدمت هذه التقنية في هذه المقالة من قبل: تخطيط CSS: ارتفاع 100 ٪ مع رأس وتذييل. إنه يتطلب بعض العلامات الإضافية في HTML الخاص بك.

قم بتعيين ارتفاع HTML والجسم إلى 100 ٪ ، وإدراج حاوية Div مع Min-Height 100 ٪ والموضع النسبي ، وتداول تذييلك مع الموضع: مطلق ، أسفل: 0 ؛

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

هنا لديك مثال وشرح http://ryanfait.com/sticky-footer/

يمكنك تعيين أ min-height على #content. لن يقوم هذا بإصلاح التذييل إلى أسفل المتصفح على وجه التحديد ، ولكنه سيضمن أنه يمكنك دائمًا رؤية كمية معينة من الخلفية.

كبديل ، باستخدام JavaScript ، يمكنك تحديد ارتفاع نافذة المتصفح ثم حساب min-height إلى عن على #content, وتطبيقه باستخدام JavaScript. هذا من شأنه أن يضمن أن تذييل هو دائما في المكان الصحيح.

لقد اكتشفت ذلك. كان HTML خاصية CSS للخلفية قائلة اللون الأبيض.

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

إذا كنت تستخدم بوصلة مكتبة ل ساس, ، هناك أيضا خيار آخر. يمكنك استخدام البوصلة لزجة الفقرة الخليط (العرض التوضيحي). يتطلب أن يكون تذييل التذييل ثابتًا ، وأن HTML لديك بنية عامة معينة.

لا تستخدم الموقف: مطلق استعمال الموقف: قريب في حين أن.

.footer {
   z-index:99;
   position:relative;
   left:0;
   right:0;
   bottom:0;
}

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow