كيفية جعل جزء التذييل من الصفحة ("التذييل") يلتصق بالحد السفلي من النافذة - ربما تكون هذه هي المشكلة الأكثر شيوعًا في تخطيط صفحات الموقع. هناك بالطبع حلول وهناك العديد منها. فيما يلي إحدى الطرق للتأكد من أن التذييل مضغوط دائمًا إلى أسفل الصفحة ، بغض النظر عن مقدار المحتوى ونوع المتصفح.
انه ضروري
المعرفة الأساسية بـ CSS و HTML
تعليمات
الخطوة 1
لنأخذ أحد مخططات ترقيم الصفحات الأكثر شيوعًا كمثال - سيكون به علية (رأس) وكتلة رئيسية وتذييل. بالطبع ، إذا لزم الأمر ، يمكنك وضع عدة أعمدة في الكتلة الرئيسية ، لكننا لن نفعل ذلك هنا ، سنركز فقط على عدم وضع التذييل. سيبدأ كود HTML للصفحة بإعلان المواصفات:
بين العلامات ، بالإضافة إلى عنوان الصفحة ، سنضع إشارة إلى الترميز: بالإضافة إلى رابط لملف CSS خارجي يحتوي على وصف للأنماط:import "styles.css" ؛ لن نضع وصف الأنماط مباشرة في كود html للصفحة لتجنب التعقيدات مع متصفح Opera من الإصدار التاسع ، بين العلامات ووضع هيكل كتلة الصفحة. الأول ، بالطبع ، هو كتلة العنوان. سنمنحه معرف الرأس لتتمكن من تعيين أنماط لهذه الكتلة المعينة:
يكون هذا الرأس دائمًا في أعلى النافذة.
ثم - الكتلة الرئيسية للصفحة. سيتكون من اثنين متداخلين - خارجي (معرف - خارجي) وداخلي (معرف - غلاف خارجي):
هذا هو الجزء الرئيسي.
وأخيرًا ، التذييل:
إنه تذييل - دائمًا في أسفل النافذة!
ستبدو الصفحة الكاملة كما يلي:
كيفية الضغط على التذييل
import "styles.css" ؛
يكون هذا الرأس دائمًا أعلى النافذة.
هذا هو الجزء الرئيسي.
إنه تذييل - دائمًا في أسفل النافذة!
الخطوة 2
الآن دعنا ننتقل إلى محتويات ورقة الأنماط. يقوم بتنفيذ المخطط التالي: سيتم تعيين كتلة الصفحة الرئيسية على ارتفاع 100٪ ، وسيتم تحديد موضع العنوان تمامًا ، وسيكون التذييل نسبيًا. لمنع العنوان من تداخل المحتوى الرئيسي للصفحة ، يتم وضع هذا المحتوى الرئيسي في مربع إضافي داخل المربع الرئيسي ، ويتم تعيين هذا المربع الإضافي على هامش علوي مساوٍ لارتفاع مربع العنوان. ويتم إعطاء هامش علوي سالب للتذييل يساوي ارتفاعه - وبهذه الطريقة سيتم رفعه فوق الحافة السفلية للنافذة إلى ارتفاعه الكامل. المحتوى الكامل لملف css: * {margin: 0؛ المساحة المتروكة: 0}
html، body {height: 100٪؛} body {
لون أسود؛
الموقف: نسبي ؛
}
# جهاز التوجيه {
الحد الأدنى للارتفاع: 100٪ ؛
الهامش: 0؛
الخلفية: أبيض ؛
لون أسود؛
} * html #outer {height: 100٪؛}
# رأس {
الموقف: مطلق.
أعلى: 0؛
اليسار: 0؛
العرض: 100٪؛
الارتفاع: 70 بكسل ؛
الخلفية: # 304a00 ؛
إخفاء الفائض؛
اللون الابيض؛
محاذاة النص: مركز ؛
} #تذييل {
الموقف: نسبي ؛
أعلى الهامش: -50 بكسل ؛
واضحة على حد سواء؛
العرض: 100٪؛
الارتفاع: 50 بكسل ؛
لون الخلفية: # 304a00 ؛
اللون الابيض؛
محاذاة النص: مركز ؛
}
.outerwrap {
تعويم: اليسار؛
العرض: 100٪؛
أعلى الحشو: 71 بكسل ؛
} يجب حفظ هذا الملف بالاسم الذي حددناه في كود html للصفحة - styles.css.
