تذييل في الأسفل في تخطيط السوائل

Question

لدي تخطيط مرن ولكن نتيجة لذلك، عندما لا يكون هناك محتوى كافٍ في الصفحة، يستمر التذييل في التحرك لأعلى كما في هذا المثال.

يستخدم الحل الشائع لإبقاء التذييل في أسفل الصفحة position: fixed أو position: absolute, ومع ذلك، عندما أفعل ذلك، يمكن أن يصطدم المحتوى بالتذييل عند تغيير الحجم (يمكنك رؤية ما أعنيه هنا.حاول تغيير حجم نافذتك إلى النقطة التي يختبئ فيها النص خلف التذييل).

فكيف يمكنني الحصول على تذييل في الأسفل مع التحرك وفقًا لذلك مع بقية الصفحة في تخطيط مرن؟

شكرًا!

Answer 1

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

أستخدم خدعة الهامش العلوي السلبي لتثبيت التذييل في أسفل الصفحة.يتم تغليف DIV حول محتويات الصفحة بأكملها بدلاً من الرأس فقط، وهو ما يكفي لمعظم الأشخاص.لنفترض أن DIV لديه فئة "كل شيء ما عدا التذييل".ثم أقوم بإجبار الصفحة على أن تكون على ارتفاع النافذة على الأقل.النسخة الكاملة التي تعمل على معظم المتصفحات:

html, body, .everything-but-the-footer {
    height: 100%;
}

.everything-but-the-footer {
    margin-top: -21px; // footer height + border * -1
    min-height: 100%
}

.footer {
    height: 20px;
    border-top-width: 1px;
}

.header {
    padding-top: 21px; // footer height + border
}

لاحظ أن تقنية JSFiddle المدرجة في التعليقات لا تعمل على IE على الإطلاق وعلى Chrome لا تحل المشكلة المذكورة (تداخل التذييل والمحتويات).

Answer 2

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

جرب هذا ومعرفة ما إذا كنت تبحث عن شيء مماثل

http://jsfiddle.net/blackpla9ue/wCM7v/1/

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

Answer 3

لهذا يمكنك استخدام تذييل لزجة تقنية لهذا.

افحص هذا:http://jsfiddle.net/tM445/5/

Answer 4

ربما أفعل شيئاً كهذا...مع القليل من مسج.

var a = $('#floatdiv').height(); //get the height of the content
var b = $(window).height();      //get the height of the window
var c = $('footer').height();    //get the height of the footer
var d = b - c;                   //subtract the footer height from window height

if(a < b){                       //if the content is smaller than the window 
    $('#floatdiv').css('height', d + 'px');  //set the content height to the    
}                                            //window minus the footer

مثال: http://jsfiddle.net/tM445/6/