روابط عنصر كتلة عرض السوائل في تذييل موضع ثابت

Question

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

لقد قمت بإنشاء نسخة محاذاة أعلى من هذا التذييل ، حيث الروابط ليست الارتفاع الكامل للحاوية الخاصة بهم.ينكسر إذا قمت بتعيين الجزء السفلي من الحاوية إلى الصفر.لقد وضعت رمز لهذا هنا:http://jsfiddle.net/bHJR3/1/

كيف يمكنني تعديل ما لدي حتى الحافة السفلية للحاوية هو دافق مع الجزء السفلي من النافذة, والروابط هي نفس ارتفاع الحاوية?

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

شكرا على أي مساعدة.

تحرير:وهنا حل مسج خطرت لي في حالة عدم وجود إجابات إذا كان أي شخص يريد أن يرى ذلك. http://jsfiddle.net/bHJR3/2/

Answer 1

السبب في أنه كسر عند تعيين bottom: 0 على #footer لأن كل شيء في الداخل #footer كان position: absolute.لا تشغل العناصر الموضوعة تماما أي مساحة في تدفق المستند ولن تتسبب في توسيع عناصرها الأصلية لاحتوائها.ضبط الارتفاع على #footer يحل هذا.الإعداد height: 100% على ال a سوف تتسبب العلامات في حجمها بالنسبة إلى العنصر الأصلي.يمكنك الاحتفاظ بها div.content, ، ولكن سيكون عليك أيضا تعيين height: 100% على ذلك.

أضف المغلق التالي إلى #footer:

bottom: 0;
height: 90px;

أضف المغلق التالي إلى A:

height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */

إزالة div.content.لا يبدو ضروريا هنا.

تحرير

يمكنك توسيط التذييل عن طريق إضافة / تغيير كس التالية على #footer:

width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */

تحرير

يمكنك استخدام أقصى عرض واستعلام وسائط لتغيير تصميم التذييل إذا كان عرض النافذة < 640 بكسل:

#footer {
    position: fixed;
    width: 100%;
    max-width: 640px;
    height: 114px;
    bottom:0;
    left: 50%;
    margin-left: -320px;
}

@media only screen and (max-width: 640px) {
    #footer {
        margin-left: auto;
        left: 0;
    }
}