الفكرة الأساسية هي

التفكير أولاً في إعداد حاوية div في الطبقة الخارجية، مع تعيين المعرف على #container، بحيث يكون ارتفاعها هو ارتفاع نافذة المتصفح، ثم تعيين #footer div كقسم فرعي لـ # الحاوية، واستخدم الوضع المطلق لجعلها مثبتة في الطرف السفلي من #الحاوية لتحقيق التأثير المطلوب.

انقر هنا لعرض تأثير صفحة الحالة. قم بتغيير ارتفاع وعرض المتصفح لرؤية تأثير جزء التذييل.

تنفيذ التعليمات البرمجية

: خذ بعين الاعتبار أولاً بنية HTML. إن تعليمات HTML البرمجية الخاصة بهذه الصفحة التجريبية بسيطة للغاية.

body،html {
الهامش: 0;
الحشو: 0؛
الخط: 12 بكسل/1.5 أريال؛
الارتفاع: 100%؛
}
#حاوية {
الحد الأدنى للارتفاع: 100%؛
الموقف: نسبي؛
}
#محتوى {
الحشو: 10 بكسل؛
الحشو السفلي: 60 بكسل؛
/* 20px(حجم الخط)x2(ارتفاع الخط) + 10px(الحشوة)x2=60px*/
}
#تذييل {
الموقف: مطلق؛
أسفل: 0؛
الحشو: 10 بكسل 0؛
لون الخلفية: #AAA؛
العرض: 100%؛
}
#تذييل h1 {
الخط: 20 بكسل/2 اريال؛
الهامش:0;
الحشو: 0 10 بكسل؛
}
1: أولاً، قم بتعيين الارتفاع (سمة الارتفاع) لعناصر html والنص على 100% (السطر 5). سيضمن ذلك أولاً أن ارتفاع العنصر الجذر يملأ نافذة المتصفح بأكملها، ثم يمكن أن يكون ارتفاع #container ملء نافذة المتصفح بأكملها. أما لماذا يتم تعيين عناصر html وbody في نفس الوقت، فذلك لأن Firefox وIE يعتبران العنصر الجذر مختلفًا، لذلك تم ضبطهما هنا.

2: ثم اضبط ارتفاع #container على 100% (السطر 8)، لكن لاحظ أنه يتم استخدام سمة "min-height" هنا بدلاً من سمة الارتفاع العادية، وذلك لأنه يتعين علينا مراعاة ذلك إذا كان المحتوى في المحتوى يزداد ويتجاوز ارتفاعه ارتفاع نافذة المتصفح، فإذا كان ارتفاع #الحاوية لا يزال 100%، فسيظل #التذييل موجودًا في الطرف السفلي من نافذة المتصفح، وبالتالي يغطي محتوى #المحتوى الموجود. الغرض من استخدام سمة min-height هو جعل ارتفاع #container "على الأقل" هو ارتفاع نافذة المتصفح. عندما يزيد المحتوى الموجود بداخلها، سيزداد ارتفاعها أيضًا.

ومع ذلك، تجدر الإشارة إلى أنه في Firefox وIE7، يتم دعم سمة min-height، بينما في IE6، تكون سمة min-height غير مدعومة يمكن تفسيرها على أنها سمة الارتفاع، ولكن تأثير سمة الارتفاع في IE6 هو التأثير الذي يجب أن يكون له الارتفاع الأدنى في الأصل، أي أنه في IE6، سيزيد ارتفاع القسم الفرعي من ارتفاع القسم الأصلي . لذلك يمكن أن يحقق هذا بالضبط التأثير الذي نريده في IE6 وIE7 وFirefox.

3: بعد ذلك، قم بتعيين #container على الموضع النسبي (السطر 9)، لجعله مرجع تحديد موضع #footer بداخله، وهو ما يسمى "أحدث عنصر سلف تم وضعه".

4: ثم اضبط #footer على الوضع المطلق (السطر 17) والصقه في أسفل #الحاوية (السطر 18).

5: ولكن يرجى ملاحظة أنه إذا قمنا بلصق #footer في الجزء السفلي من #container، فسوف يتداخل فعليًا مع قسم #content أعلاه لتجنب تغطية المحتوى في #content، قمنا بتعيينه في #contetn عن طريق إزالة الحشو على الجانب السفلي وجعل قيمة الحشوة السفلية مساوية لارتفاع #التذييل (السطر 13)، يمكنك التأكد من تجنب نص #المحتوى عند حساب هذا الارتفاع، انتبه إلى طريقة الحساب الواردة في التعليقات في الكود (السطر 14).