اسم الطبقات هو رأس التذييل. تذييل DIY مسمر في الأسفل
يمكن استخدام هذه العلامة، مثل العلامات السابقة، عدة مرات على الصفحة. ربما خمنت بالفعل من الاسم أنه هو تذييل الصفحة. يمكن أن تحتوي على عدادات ونص حول حقوق الطبع والنشر على الموقع ومعلومات الاتصال وما إلى ذلك. من الممكن أيضًا إدراج شريط التنقل () في تذييل الصفحة. لا أحد يمنع إدراج عناصر جديدة مثل الجانب والقسم، لكنني ما زلت لن أفعل ذلك لو كنت أنت.
و
رأس الموقع
مشاركة رقم 1
هنا سوف نكتب نص المشاركة الأولى.
مشاركة رقم 2
وهنا سنكتب نص التدوينة الثانية.
سنة، الخ. النسخ ممنوع))
يجب أن تكون النتيجة ما يلي:
بغض النظر عن رأس وتذييل صفحة المستند. في مثل هذه الحالات يمكن استخدام هذه العناصر عدة مرات. على الرغم من أنني متأكد من أنه يمكن استخدامها في الشريط الجانبي الجانبي أيضًا.
حسنًا، لقد تعرفت الآن على العناصر الهيكلية الأساسية لـ HTML5، وفي الدروس التالية سننظر إلى المزيد من العناصر الجديدة، والأشكال المختلفة التي لم تكن موجودة في مواصفات HTML الأخرى!
مرحبا عزيزي القراء لموقع بلوق. نواصل موضوع تخطيط الكتلة الذي بدأه واستمر في المقالات الثلاثة السابقة. من حيث المبدأ، تمكنا بالفعل من إنشاء تخطيط موقع مكون من عمودين وثلاثة أعمدة، وتمكنا حتى من مراعاة الفروق الدقيقة في إنشاء تخطيط مرن.
بالإضافة إلى ذلك، في المقالات الأولى حول تخطيط موقع الويب () تمت مناقشة بعض المفاهيم الأساسية لإدارة المواقع، دون فهم أنه سيكون من الصعب جدًا فهم الفروق الدقيقة.
ما هي المشاكل التي واجهناها في تصميم موقعنا؟
سنحاول اليوم حل مشكلة صغيرة واحدة قد تنشأ مع التصميم الذي أنشأناه سابقًا. يحدث هذا الموقف غالبًا عند عرضه على شاشات كبيرة (بدقة عالية) وعند عرض صفحة تحتوي على كمية صغيرة من المعلومات.
ومع ذلك، في رأيي، من الضروري الضغط على التذييل إلى أسفل تخطيط الموقع، وسيكون هذا صحيحًا بشكل خاص في الحالة عندما يكون ارتفاع الصفحة أقل من ارتفاع شاشة المستخدم. يمكن تمثيل ذلك بشكل تخطيطي مثل هذا:
أولئك. سيكون سلوك التذييل الصحيح في حالة وجود كمية صغيرة من المعلومات على الصفحة وشاشة مستخدم كبيرة كما يلي:
لتنفيذ ذلك، نحتاج إلى إجراء عدد من المعالجات باستخدام كود تخطيطنا. علاوة على ذلك، سنقوم بإجراء تغييرات ليس فقط على ملف نمط CSS Style.css، ولكن أيضًا على Index.html، الذي يحتوي على كود Html ويشكل كتل Div. ولكن أول الأشياء أولا.
على سبيل المثال، سوف نستخدم تخطيط الموقع المكون من ثلاثة أعمدة الذي أنشأناه سابقًا. في هذه الحالة، سيبدو Index.html كما يلي:
وتمت كتابة خصائص CSS التالية في ملف Style.css:
النص، html ( هامش: 0 بكسل؛ الحشو: 0 بكسل؛ ) #maket ( العرض: 800 بكسل؛ الهامش: 0 تلقائي؛ ) #header (لون الخلفية: #C0C000؛) #left (لون الخلفية: #00C0C0؛ العرض: 200 بكسل ; (لون الخلفية: #FFC0FF؛ واضح: كلاهما؛)
حسنًا، يبدو التصميم نفسه كما يلي:
كما ترون، لا يتم الضغط على التذييل إلى الأسفل، وبالتالي، لا يلبي متطلباتنا (يوجد دائمًا أسفل العمود السفلي)، لذلك سيتعين علينا إجراء تعديلات على الكود. يمكن فعل الشيء نفسه بالنسبة للتخطيط ذي العمودين، وللتخطيط المطاطي أيضًا. الطريقة عالمية.
كيفية دفع التذييل إلى أسفل تخطيط موقع الويب
لذلك، نحتاج إلى نقل حاوية Div مع التذييل إلى أسفل الشاشة. للقيام بذلك، ستحتاج أولاً إلى ضبط ارتفاع الصفحة بأكملها على مائة بالمائة (سوف تشغل الشاشة بأكملها). سيكون ذلك ضروريًا لتغيير حجم الكتلة الرئيسية بالتخطيط إلى 100%.
يتم وضع محتوى صفحة الموقع بالكامل في علامتي الفتح والإغلاق Body، ولذلك نحتاج إلى إضافة خاصية CSS أخرى لعلامة Body في Style.css، مع ضبط الارتفاع على 100%:
النص الأساسي، HTML ( الهامش: 0 بكسل؛ الحشو: 0 بكسل؛ الارتفاع: 100%؛ )
لن يؤثر هذا على المظهر بأي شكل من الأشكال حتى الآن، ولكن الآن يمكن تمديد المدونة الرئيسية إلى الارتفاع الكامل للشاشة. أولئك. لقد كانت نوعًا من المرحلة التحضيرية.
خصائص CSS الأساسية، إذا رغبت في ذلك، يمكنك إلقاء نظرة عليها. لنقم الآن بتعيين حاوية Div التي تحتوي على تخطيطنا بالكامل على ارتفاع لا يقل عن 100%:
أريد أيضًا تسليط الضوء عليه (div بمعرف = "maket"). للقيام بذلك، سأعطيه إطارًا باستخدام خاصية Border() المقابلة:
تتيح لك الخاصية السوداء Border: Solid 3px تعيين حدود صلبة (صلبة) بسمك 3 بكسل باللون الأسود لهذه الحاوية. سيتيح لك ذلك أن ترى بوضوح أن الحاوية ذات التخطيط قد امتدت إلى ارتفاع الشاشة بالكامل، حتى مع وجود كمية صغيرة من المعلومات على الصفحة:
سنحتاج الآن إلى إخراج كتلة التذييل من الحاوية العامة ووضعها أدناه مباشرة بعد الحاوية العامة. ماذا سيعطي هذا؟ وحقيقة أن التذييل في التخطيط أخيرًا سوف يميل إلى النزول، ولن يتم الضغط عليه، كما كان من قبل، على عموده الأطول. في هذه الحالة، سيبدو Index.html كما يلي:
يرجى ملاحظة أن الكتلة ذات التذييل لم تعد موجودة داخل الحاوية العامة (maket)، وبالتالي لم يعد يتم تنظيم عرضها بواسطة خصائص CSS المحددة لـ maket في ملف Style.css. سيمتد عرض التذييل عبر الشاشة بأكملها، لكنه سيظل موجودًا في الجزء السفلي من الشاشة، أسفل الكتلة الرئيسية مباشرةً:
ولكن تظهر مشكلة مرة أخرى، لأنه لكي تتمكن من رؤية التذييل، عليك الآن تمرير الشاشة في المتصفح (انظر شريط التمرير في الصورة أعلاه).
يحدث هذا لأن الحاوية الرئيسية (maket) تشغل ارتفاع الشاشة بالكامل (يتم تحديد ذلك بواسطة خاصية min-height: 100%)، ويقع التذييل خلفها مباشرة ولمشاهدتها سيتعين عليك التمرير، وهو ما ليست مريحة للغاية وعملية .
يمكنك حل هذه المشكلة عن طريق تعيين حشوة سلبية لحاوية Div مع التذييل بحيث تتحرك لأعلى بمسافة تساوي ارتفاعها. في هذه الحالة، ستتداخل حاوية التذييل مع الحاوية الرئيسية وتتناسب مع ارتفاع شاشة المتصفح (أي لن تحتاج إلى التمرير لمشاهدتها).
ولكن لتعيين إزاحة سلبية من الأعلى، تحتاج إلى معرفة ارتفاع التذييل ذاته، لكننا لا نعرفه بعد.
لذلك، سنقوم أولاً بتعيين ارتفاع الحاوية التي تحتوي على التذييل عن طريق تعيين الخاصية المقابلة في Style.css:
#footer (لون الخلفية: #FFC0FF؛ واضح: كلاهما؛ الارتفاع: 50 بكسل؛)
ومن ثم وضعنا لها هامشاً سالباً في الأعلى إلى ارتفاع يساوي ارتفاعها:
سيسمح هذا للتذييل بالارتفاع تمامًا إلى ارتفاعه وبالتالي يتناسب مع شاشة المتصفح (يمكننا الآن إزالة حد خاصية CSS: 3 بكسل أسود صلب من قاعدة maket، بحيث لا يمنع سمك الحد كاملنا التخطيط، بما في ذلك التذييل، من الملاءمة في ارتفاع الشاشة):
كما ترون، الآن لا يظهر شريط التمرير في المتصفح ويتم وضع تخطيط الموقع القائم على الكتلة المكون من ثلاثة أعمدة بالكامل على شاشة واحدة (في حالة وجود معلومات قليلة على الصفحة) ويحتوي على تذييل في الأسفل . وهذا هو بالضبط ما يتعين علينا القيام به.
نقوم بإدخال الفاصل ونحارب Internet Explorer
لكن تنشأ مشكلة، والذي لن يظهر إلا عندما يكون هناك مزيد من المعلومات على صفحة التخطيط وقد ينشأ الموقف التالي:
اتضح أنه قد ينشأ موقف عندما تتداخل المعلومات الموجودة في أحد أعمدة التخطيط مع التذييل، وهو ما لن يبدو جميلًا. يحدث هذا بسبب الحشو السلبي سيئ السمعة الذي وضعناه له والذي ساعد في رفع الطابق السفلي لدينا مقابل حاوية التخطيط الرئيسية.
أولئك. اتضح أنه يوجد في الجزء السفلي من الشاشة كتلتان متداخلتان في منطقة الطابق السفلي.
الحل لهذه المشكلة هو إضافة حاوية Div فارغة جديدة (ما يسمى الفواصل) في الحاوية الرئيسية للتخطيط الخاص بنا (maket)، في المكان الذي كانت توجد فيه الكتلة ذات التذييل مسبقًا.
من خلال ضبط هذه الحاوية الجديدة على ارتفاع يساوي ارتفاع التذييل، يمكننا تجنب تصادم المعلومات من الحاوية الرئيسية مع الكتلة مع التذييل. لنقم بتعيين معرف () لهذه الحاوية التي تسمى Rasporka ونتيجة لذلك سيبدو Index.html الخاص بالتخطيط المكون من ثلاثة أعمدة كما يلي:
وسنكتب في Style.css هذا (، والذي يحدد ارتفاع حاوية المباعد هذه مساويًا لارتفاع الطابق السفلي:
#rasporka ( الارتفاع: 50 بكسل؛ )
ونتيجة لذلك، سيتم الضغط على التذييل من الأسفل ليس إلى المعلومات الموجودة في الحاوية الرئيسية (على سبيل المثال، النص الموجود في العمود الأعلى)، ولكن إلى مساحة تساوي ارتفاع التذييل مع حاوية فاصل لا تحتوي على معلومات .
بهذه الطريقة نتجنب الاصطدامات والتشوهات في تخطيطنا المكون من ثلاثة أعمدة. كل شيء سيكون واضحًا وجميلًا (لائقًا ونبيلًا):
كما ذكرت أعلاه، يجب الآن تعيين عرض التذييل بشكل منفصل، لأن... لم تعد هذه الحاوية جزءًا من الحاوية الرئيسية. للقيام بذلك، تحتاج إلى إضافة خصائص إضافية للتذييل إلى ملف CSS، مما يسمح لك بتعيين عرضه ومحاذاته أفقيًا في منتصف الشاشة.
من المنطقي تعيين العرض مساويًا لعرض التخطيط بأكمله باستخدام خاصية العرض، ويمكن إجراء المحاذاة الأفقية بنفس الطريقة التي فعلناها للتخطيط بأكمله على تخطيط الكتلة.
وبالتالي، سنحتاج إلى إضافة خصائص إضافية لتذييل المعرف:
#footer (لون الخلفية: #FFC0FF؛ واضح: كلاهما؛ الارتفاع: 20 بكسل؛ الهامش العلوي: -20 بكسل؛ العرض: 800 بكسل؛ الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛)
باستخدام الخاصية width:800px، يتم ضبط العرض على 800 بكسل، وباستخدام الخاصيتين هامش-يسار: تلقائي وهامش-يمين: تلقائي، يتم ضبط المسافة البادئة على يسار ويمين التذييل تلقائيًا، نتيجة لـ حيث ستكون هذه المسافات البادئة متساوية وسيتم محاذاة بطلنا إلى المنتصف:
حسنًا، يبدو أنه لم يعد هناك شيء يمكن تحسينه، لكن الأمر لم يكن كذلك. كما هو الحال دائمًا، فإن متصفحنا المفضل Internet Explorer 6 لا يفهم شيئًا من خصائص CSS التي نستخدمها. في هذا المتصفح (وربما في بعض المتصفحات القديمة أيضًا)، على الرغم من كل الجهود التي بذلناها، لن يتم الضغط على التذييل إلى الأسفل، ولكنه سيظل ملتصقًا بالعمود العلوي من تخطيط الموقع.
كل هذا يحدث بسبب (لا يفهم خاصية min-height: 100%، التي استخدمناها لتعيين الحد الأدنى لارتفاع الكتلة الرئيسية مساويًا لارتفاع الشاشة.
لذلك، لحل هذه المشكلة، سيتعين علينا استخدام ما يسمى بالاختراق الذي يسمح لنا بشرح (على أصابعنا) للمتصفحات القديمة ما يجب القيام به. قبل قائمة خصائص CSS لـ maket، ستحتاج إلى إدراج المجموعة التالية:
* HTML #maket ( الارتفاع: 100%; )
سيتم تطبيق هذه القاعدة على متصفح Internet Explorer 6 فقط، ولن يأخذها الآخرون في الاعتبار وينفذونها.
لذلك، سيكون المظهر النهائي لـ Style.css مع الضغط على التذييل في أسفل الشاشة كما يلي:
الجسم، html ( الهامش: 0 بكسل؛ الحشو: 0 بكسل؛ الارتفاع: 100%؛ ) * html #maket ( الارتفاع: 100%؛ ) #maket ( العرض: 800 بكسل؛ الهامش: 0 تلقائي؛ الحد الأدنى للارتفاع: 100%؛ ) # رأس (لون الخلفية:#C0C000;) #left(لون الخلفية:#00C0C0; العرض:200px; float:left;) #right( width:200px; لون الخلفية:#FFFF00; float:right; ) #content (لون الخلفية: #8080FF؛ الهامش الأيسر: 202 بكسل؛ الهامش الأيمن: 202 بكسل؛) #footer( لون الخلفية: #FFC0FF؛ واضح: كلاهما؛ الارتفاع: 50 بكسل؛ الهامش العلوي: -50 بكسل؛ العرض: 800 بكسل؛ الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي) #rasporka (الارتفاع: 50 بكسل؛)
حسنًا، تم تقديم الشكل النهائي لـ Index.html أعلاه مباشرةً. هذا كل شيء، هذه السلسلة من المقالات المخصصة لتخطيط الكتل المكونة من 2 و 3 أعمدة وتخطيطات مواقع الويب الثابتة والمرنة يمكن اعتبارها كاملة.
يمكنك أيضًا مشاهدة الفيديو "العمل باستخدام علامة div لـ Html":
حظا سعيدا لك! نراكم قريبا على صفحات موقع المدونة
قد تكون مهتما
تخطيط الكتلة - نقوم بإنشاء تخطيطات مكونة من عمودين وثلاثة أعمدة وتخطيطات مرنة للموقع 
تخطيط DiV - إنشاء كتل لتخطيط مكون من عمودين في HTML، وتحديد أحجامها وتعيين موضعها في CSS
إذا كانت الأحذية هي المكون النهائي لأي ملابس، فإن تذييل موقع التجارة الإلكترونية هو العنصر الأخير في تصميم البيع الخاص به. من خلال التركيز على العنصر السفلي، أي التذييل، تصبح مواقع الويب الحديثة جاهزة لعرض شخصيتها بكل طريقة ممكنة. في بيئة التجارة الإلكترونية التنافسية، هناك ما يكفي من الأفكار الأصلية والإبداع واتجاهات التصميم. قبل تنويع تذييل موقع التجارة الإلكترونية، يجدر النظر في نقاط مهمة. ما الذي يجب وضعه أولاً وما هي أفضل طريقة للقيام بذلك؟ تتضمن مجموعتنا من تصميمات التذييل الملهمة بعض الخيارات المثيرة للاهتمام.
إقرأ أيضاً: 13 اتجاهات تسويق التجارة الإلكترونية لعام 2019
إحصائيات مثيرة للاهتمام من Chartbeat. أظهرت دراسة لسلوك 25 مليون مستخدم مدى عمق تصفحهم للصفحات. اتضح أن انتباه المستخدم ينجذب إلى المساحة الموجودة أسفل خط الطي. عند تلقي المزيد من المعلومات المفيدة من الناحية العملية، يبقى الزائرون لفترة أطول في المنطقة التي تبلغ 1200 بكسل من أعلى الصفحة (مع متوسط شاشة رأسية تبلغ 700 بكسل في المتصفح)، أو خلف الشاشة الثانية.
وقت العرض (بالثانية) / المسافة من أعلى الصفحة (بالبكسل)
هناك فجوة كبيرة في مدة مشاهدة الشاشتين الأولى والثانية. تبلغ مدة TOP 4 ثوانٍ، وتصل المدة إلى الحد الأقصى (16 ثانية) عند 1200 بكسل من الأعلى، ومع مزيد من التمرير، تتناقص ببطء.
نسبة الزوار (%) / المسافة من أعلى الصفحة (بالبكسل)
جزء كبير من الزوار (أكثر من 25٪) لا ينتظرون حتى تحميل المحتوى ويبدأون في تمرير الصفحة. وهذا يعني أن 75% فقط سيرون القمة أولاً. المنطقة الأكثر مشاهدة في الصفحة هي 550 بكسل (أعلى خط الطي مباشرةً).
تبدد الدراسة الأسطورة القائلة بأن المستخدمين لا ينتقلون إلى أسفل الصفحة ويشاهدون كل المحتوى. يعتبر التذييل أيضًا مهمًا لموقع التجارة الإلكترونية الحديث، كما أن له مزاياه.
أفكار حول كيفية تصميم "السرداب" (التذييل)، أمثلة على تصميمات البيع
ستخبرك هذه النصائح العشر بكيفية تصميم تذييل موقع الويب بشكل جميل - وفقًا لقواعد التكوين في تصميم الويب وحل المهام ذات الأولوية. قم بتطبيق الأساليب الأكثر ملاءمة لتحسين سهولة الاستخدام وتجربة المستخدم وحتى زيادة المبيعات.
1. المعلومات المطلوبة
تقليديا، يتم تغطية المسائل التنظيمية والقانونية المطلوبة في تذييل الموقع. تم تصميم الإشعارات بنص أقل وضوحًا، مما يحرر مناطق أخرى من الصفحات لعناصر ذات معنى أكبر. وفيما يلي قائمة عينة للنظر فيها:
- إشعارات حقوق الطبع والنشر
- إخلاء المسؤولية القانونية
- معلومات الفواتير
- إشعار ملفات تعريف الارتباط
يجب أن يستوفي موقع الويب الذي يبيع المنتج المتطلبات القانونية ويقدم معلومات حول الإجراء وفترات الإرجاع. موقعه في التذييل مناسب لكل من مورد البيع والزوار.
مثال على التذييل: إيف روشيه
متجر على الإنترنت للعلامة التجارية Yves Rocher: تذييل بملء الشاشة بتصميم جميل للطبقات المتناوبة. يبلغ عن الشركة والبنية التحتية لموقع البيع - بدءًا من تتبع الطلب وحتى سياسة البيانات الشخصية. هناك أيضًا نصائح حول استخدام المنتج والمكافآت والعروض الترويجية
مثال على التذييل: Lumity
يخضع تجار المكملات الغذائية لمتطلبات قانونية متزايدة. مسؤولية. هناك عدد لا بأس به من الأشياء التي ينبغي عليهم/لا ينبغي عليهم ذكرها على موقع المبيعات الخاص بهم. يتم تمييز الروابط إلى المعلومات القانونية بالخط العريض لتحسين الرؤية.
يتناسب التذييل الذي يحتوي على صورة خلفية جميلة بشكل عضوي مع التصميم العام للموقع. لا توجد حدود واضحة، بل المحتوى نفسه بمثابة فاصل
مثال على التذييل: شركة Saddleback Leather Co
موقع بيع بتصميم قديم جميل للرأس والتذييل. ضمان 100 عام ضد عيوب المواد والتشطيب. شروط العودة مصحوبة قصص مثيرة للاهتمام... اتضح أن كل شيء ليس محزنًا للغاية بالنسبة لمعلومات التجارة الإلكترونية الضرورية
2. المساحة السلبية – مسافة بصرية كافية
عند تحديد عدد روابط التذييل، لا تبخل بالمساحة السلبية - سيكون لذلك تأثير مذهل على الإدراك البصري وتحسين إمكانية القراءة. القاعدة العامة: من خلال الحفاظ على التسلسل الهرمي المرئي، تتم ملاحظة العناصر المركزية بشكل أسرع (يمكن استخدامها لصالحك!).
مثال على التذييل: QUAY AUSTRALIA
بفضل النمط البسيط والقائمة المنسدلة الثابتة، يمكن للمتجر عبر الإنترنت توفير مساحة واسعة
مثال على التذييل: Incase
عن كميات كبيرةيمكن قول المساحة السلبية الدقيقة (بين العناصر الصغيرة) بهذه الطريقة: طالما أن جميع المعلومات الضرورية موجودة، فهي مقروءة ويمكن إدراكها بسرعة - كل شيء على ما يرام
مثال على التذييل: Stumptown Coffee Roasters
يعد التذييل الواسع لموقع القهوة استكمالًا ممتازًا لتكوين تصميم نظيف، حيث يوجد الكثير من المساحة السلبية الكلية ("الهواء" بين الأقسام / الأقسام)
3. الدعوة النهائية للعمل
إقرأ أيضاً: أكثر من 30 مثالًا وفكرة لتصميم أزرار الإجراءات المستهدفة
يتحدث التصميم الأنيق للتذييل عن الكثير عن المورد نفسه. من المهم ملاحظة: يبقى المشتري هنا لفترة أطول قليلاً من بقاءه في الأجزاء الأخرى من الصفحة. فرصة مناسبة لدعوة أخيرة أخرى تحث المستخدم على اتخاذ إجراء. غالبًا ما يكون هذا اشتراكًا/رسالة إخبارية، ولكن يمكنك أيضًا ربط مكالمة CTA بتسجيل الحساب.
مثال على التذييل: Greetabl
لدى Greetabl الجزء السفلي المصمم بشكل متواضع من صفحاته والذي يتضمن دعوة للاشتراك. مع الحد الأدنى من العناصر، يصبح النداء ملحوظا، ويتناغم مع الخلفية الفيروزية ويتحول إلى زخرفة للموقع
مثال على التذييل: Ecwid
تصميم جميل مع عبارات تحث المستخدم على اتخاذ إجراء في أسفل الصفحات. هيكل منشئ موقع البيع عالمي. وقد تمت ترجمته إلى 35 لغة لعملائه المليون.
4. العربة العائمة – زيادة توافر وظائف البيع
يعد الوصول إلى عربة التسوق من أسفل الموقع طريقة رائعة لتحسين سهولة الاستخدام وخصائص البيع للموقع.
مثال على التذييل: ليموناديلا
من الممتع النظر إلى موقع البيع الخاص بشركة تقديم الطعام وهو مناسب للمشتري
5. التنقل في التذييل
يعد الجزء السفلي من الموقع مثاليًا للمعلومات التي لا يتم عرضها كثيرًا: حول الشركة وشروط الخدمة وسياسة الخصوصية. في هذه الحالة، وظيفة التذييل هي إنقاذ الجميع. عندما يشعر شخص ما بالضياع في بيئة التجارة الإلكترونية، يصبح مهتمًا بالبنية التحتية متجر الكتروني، التمرير بشكل غريزي أكثر ...
المساحة السلبية ضرورية لسهولة قراءة المحتوى. بشكل عام، "التذييل" ليس لأغراض التنقل، على عكس القائمة أو خريطة الموقع. في حالات نادرة فقط، تضع مواقع التجارة الإلكترونية فئات منتجات فردية في التذييل (
أتذكر أنه في اللحظة التي بدأت فيها التبديل من تخطيط الجداول إلى تخطيط div، كانت إحدى الصعوبات التي واجهتها هي ما يلي - كيفية دفع تذييل الموقع إلى أسفل نافذة المتصفح، بحيث تظهر الصفحة ممدودة إلى ارتفاعها الكامل، بغض النظر عن حجم النص، وإذا كان ارتفاع الصفحة أكبر من ارتفاع نافذة المتصفح (عند ظهور التمرير)، فإن التذييل سيبقى في مكانه الصحيح.
إذا تم حل هذه المشكلة بمساعدة الجداول فقط عن طريق تحديد ارتفاع الجدول و/أو الخلية المتداخلة فيه، فمتى باستخدام CSSيستخدم تخطيط الكتلة أسلوبًا مختلفًا تمامًا.
في عملية الممارسة، حددت نفسي 5 طرق لضغط التذييل إلى أسفل نافذة المتصفح باستخدام CSS.
يحتوي كود HTML لجميع الطرق المقدمة على البنية التالية (الفرق الوحيد هو كود CSS):
يتضمن رمز CSS أدناه فقط تلك الخصائص الضرورية في الحد الأدنى لتنفيذ الطريقة المقابلة. لكل واحد منهم يمكنك رؤية مثال حي.
الطريقة الأولى
يتم الضغط على التذييل لأسفل عن طريق وضعه بشكل كامل وتمديد ارتفاع الكتل الأصلية (html وbody و.wrapper) إلى 100%. في هذه الحالة، يحتاج محتوى block.content إلى تحديد هامش سفلي يساوي أو أكبر من ارتفاع التذييل، وإلا فإن التذييل سيغطي جزءًا من المحتوى.
* ( الهامش: 0؛ الحشو: 0؛ ) html، النص (الارتفاع: 100%؛ ) .المغلف ( الموضع: نسبي؛ الحد الأدنى للارتفاع: 100%؛ ) .المحتوى ( الجزء السفلي: 90 بكسل؛ ) .التذييل ( الموضع : اليسار المطلق: 0؛
الطريقة الثانية
يتم الضغط على التذييل لأسفل عن طريق سحب كتلة المحتوى و"الأصول" الخاصة بها إلى الارتفاع الكامل لنافذة المتصفح ورفع التذييل لأعلى عبر هامش سلبي (الهامش العلوي) للتخلص من التمرير العمودي الذي يظهر. في في هذه الحالةمن الضروري الإشارة إلى ارتفاع الطابق السفلي، ويجب أن يكون مساوياً لمقدار المسافة البادئة.
* ( الهامش: 0; الحشو: 0; ) html, body, .wrapper ( الارتفاع: 100%; ) .content ( حجم الصندوق: border-box; الحد الأدنى للارتفاع: 100%; الحشو السفلي: 90px; ) . التذييل (الارتفاع: 80 بكسل؛ الهامش العلوي: -80 بكسل؛)
بفضل خاصية box-sizing: border-box، نمنع ارتفاع الصندوق الذي يحتوي على فئة .content من 100%. أي أنه في هذه الحالة الحد الأدنى للارتفاع: 100% + الحشو السفلي: 90 بكسل يساوي 100% من ارتفاع نافذة المتصفح.
الطريق الثالث
إنه جيد لأنه، على عكس الطرق الأخرى (باستثناء الطريقة الخامسة)، لا يهم ارتفاع التذييل.
* ( الهامش: 0؛ الحشو: 0؛ ) html، النص ( الارتفاع: 100%؛ ) .المغلف ( العرض: الجدول؛ الارتفاع: 100%؛ ) . المحتوى ( العرض: صف الجدول؛ الارتفاع: 100%؛ )
نحن هنا نحاكي سلوك الجدول عن طريق تحويل كتلة .wrapper إلى جدول وكتلة .content إلى صف جدول (عرض: جدول وعرض: خصائص صف الجدول على التوالي). بفضل هذا، وحقيقة أن كتلة .content وجميع الحاويات الأصلية الخاصة بها مضبوطة على ارتفاع 100%، يتم تمديد المحتوى إلى ارتفاعه الكامل، مطروحًا منه ارتفاع التذييل، والذي يتم تحديده تلقائيًا - تمنع محاكاة الجدول تذييل الصفحة من التوسع يتجاوز ارتفاع نافذة المتصفح.
ونتيجة لذلك، يتم الضغط على التذييل إلى الأسفل.
الطريقة الرابعة
هذه الطريقة لا تشبه أيًا من الطرق السابقة، وتكمن خصوصيتها في استخدام دالة CSS calc() ووحدة القياس vh، والتي تدعمها المتصفحات الحديثة فقط. هنا تحتاج إلى معرفة الارتفاع الدقيق للطابق السفلي.
* ( الهامش: 0؛ الحشو: 0؛ ) .المحتوى ( الحد الأدنى للارتفاع: calc(100vh - 80px); )
100vh هو ارتفاع نافذة المتصفح، و80px هو ارتفاع التذييل. وباستخدام الدالة calc() نطرح القيمة الثانية من الأولى، وبالتالي نضغط التذييل إلى الأسفل.
يمكنك معرفة المتصفحات التي تدعم calc() وvh على موقع caniuse.com باستخدام الروابط التالية: دعم وظيفة calc()، ودعم وحدة vh.
الطريقة الخامسة (الأكثر صلة)
هذا أفضل طريقةمن بين كل ما تم تقديمه، إلا أنه يعمل فقط في المتصفحات الحديثة. كما هو الحال في الطريقة الثالثة، لا يهم ارتفاع التذييل.
* ( الهامش: 0؛ الحشو: 0؛ ) html، الجسم ( الارتفاع: 100%؛ ) .المغلف ( العرض: flex؛ الاتجاه المرن: عمود؛ الحد الأدنى للارتفاع: 100%؛ ) .content ( flex: 1 0 auto ) .تذييل ( فليكس: 0 0 تلقائي؛ )
يمكنك التعرف على دعم المتصفح للخاصية المرنة.
