زیرزمین ثابت. پاورقی DIY به پایین میخ شده است

02.09.2019 اینترنت، وای فای، شبکه های محلی

سلام به همه!

اگر تمام عناصر آن در جای خود قرار داشته باشند، سایت از نظر زیبایی ظاهری دلپذیر به نظر می رسد. با این حال، اغلب مواردی وجود دارد که به نظر می رسد همه چیز عادی است، اما هنوز چیزی اشتباه است... به عنوان مثال، اگر صفحه کوتاه باشد، پاورقی به پایین صفحه فشار داده نمی شود، بلکه در جایی قرار دارد که باید باشد - بعد از بلوک اصلی سایت خیلی قشنگ به نظر نمیاد

بنابراین، امروز در مورد نحوه فشار دادن پاورقی سایت به حاشیه پایین پنجره مرورگر با شما صحبت خواهیم کرد.

بنابراین، ما شرایط زیر را برای زیرزمین تعیین می کنیم:

هنگامی که ارتفاع پنجره مرورگر از ارتفاع صفحه بیشتر باشد، بدون توجه به محتوا، پاورقی به پایین صفحه فشار داده می شود.
زمانی که حجم محتوا از ارتفاع پنجره مرورگر بیشتر باشد، فوتر در جای مناسب خود قرار دارد.
در تمام مرورگرهای محبوب کار می کند.
قابلیت اطمینان - به پیچیدگی طرح بستگی ندارد.

به عنوان مثال، بیایید یک صفحه ساده را در نظر بگیریم که از دو بلوک اصلی تشکیل شده است: اصلی و پاورقی. بیایید مطمئن شویم که بلوک اصلی، بدون در نظر گرفتن مقدار محتوا، کل منطقه پنجره مرورگر را اشغال می کند، در حالی که پاورقی را به پایین صفحه فشار می دهیم تا نوار اسکرول عمودی در مرورگر ظاهر نشود. چگونه این کار را انجام می دهیم:

مرحله 1

ما 2 بلوک می سازیم: اصلی (اصلی) و زیرزمین (پایین). ظرف اصلی را به تمام ارتفاع صفحه مرورگر (دقیقه ارتفاع) کشیده و ارتفاع پاورقی (ارتفاع) را به شدت مشخص می کنیم.

در این حالت، ارتفاع کل سایت، ارتفاع صفحه نمایش + ارتفاع فوتر خواهد بود.

گام 2

ما از یک حاشیه منفی (margin-top) برای "ورود" به بلوک اصلی استفاده می کنیم تا ارتفاع سایت فقط 100٪ ارتفاع صفحه باشد.

با این ترتیب بلوک ها و با مقدار کافی محتوا (مثلاً متن) در بلوک اصلی، می توان محتوای بلوک اصلی را در فوتر همپوشانی کرد:

مرحله 3

برای جلوگیری از این مشکل احتمالی، یک بلوک خالی در انتهای بلوک اصلی اضافه کنید که ارتفاع آن کمتر از ارتفاع پاورقی نباشد (یا بهتر است کمی بیشتر باشد تا مقداری فاصله بین محتوا و پاورقی):

حالا اگر محتوا زیاد باشد، بلوک خالی را به پایین منتقل می کند. و این پاورقی را پایین می آورد و از قرار گرفتن محتوا در آن جلوگیری می کند.

بیایید ببینیم که در کد چگونه به نظر می رسد:

<html > <سر > <عنوان >پاورقی به پایین فشار داده می شود</title> <نوع سبک = "text/css" >* (حاشیه: 0؛ بالشتک: 0؛) /* تنظیم مجدد بالشتک */ body ( پس زمینه: #fff;) html,body ( ارتفاع: 100%؛ /* تنظیم ارتفاع بدنه سند */).main (/ * بلوک اصلی، که باید تا پاورقی کشیده شود */ پس‌زمینه: #999؛ /* رنگ پس‌زمینه بلوک اصلی (برای وضوح) */ ارتفاع حداقل: 100٪؛ /* حداقل ارتفاع بلوک اصلی را تنظیم کنید */ ) * html .main ( /* هک برای ie6 */ ارتفاع: 100%؛ /* برای ie6، زیرا min-height */ را درک نمی کند).hFooter ( /* این یک فاصله در بلوک اصلی است - ما رزرو می کنیم فضا برای زیرزمین */ ارتفاع: 40 پیکسل؛ /* ارتفاع پاورقی ما */). پاورقی ( /* پاورقی */ پس زمینه: #0000CC؛ /* رنگ پس زمینه پاورقی (برای وضوح) */ رنگ: #fff؛ ارتفاع: 40 پیکسل ; /* ارتفاع پاورقی */ margin-top: -40px ؛ /* یک تورفتگی منفی در ارتفاع برابر با ارتفاع پاورقی ایجاد کنید تا به وضوح در اندازه صفحه قرار گیرد */)</style> </head> <بدن > <div class = "main" >این بلوک اصلی است<div class = "hFooter" > </div> <div class = "footer" >اینجا زیرزمین است</div> </body> </html>

توجه: هنگام استفاده از طرح بندی بلوک و بلوک های اصلی شناور (ستون ها) برای hFooter، باید clear: هر دو را اضافه کنید تا پاورقی در زیر ستون ها قرار گیرد.:

hFooter ( روشن : هر دو ؛ ارتفاع : 40 پیکسل ؛ )

اگر قبلاً کمی تسلط داشته اید، ممکن است این سؤال پیش بیاید: "چرا وقتی می توانید از padding-bottom از یک عنصر اضافی استفاده کنید؟"

پاسخ این است که شما نمی توانید فقط از آن در اینجا استفاده کنید، زیرا اندازه بلوک برابر با ابعاد آن + عرض لایه داخلی + عرض حاشیه ها است. ترکیبی از حداقل ارتفاع: 100٪ و padding-bottom ارتفاع سایت را بیشتر از ارتفاع صفحه نمایش می دهد. در نتیجه، حتی اگر اصلاً محتوایی وجود نداشته باشد، فوتر خارج از صفحه خواهد بود.

نقطه ضعف این تکنیک استفاده از یک عنصر خالی اضافی hFooter است. در شرایط واقعی (زمانی که محتوای سایت خالی نیست و از طرح بندی بلوک استفاده می شود)، با استفاده از این تکنیک می توان از این امر جلوگیری کرد تا به پاکسازی جریان بدون استفاده از عنصر اضافی کمک کند و از تداخل محتوا با فوتر جلوگیری شود. در ستون ها padding-bottom را می نویسیم.

مشکلات با لایه های z

در تکنیکی که در بالا توضیح داده شد، پاورقی با یک فرورفتگی منفی به سمت بالا بالا آمده است. این یک مشکل بالقوه با لایه های z ایجاد می کند. به عنوان مثال، ما باید یک پنجره پاپ آپ را نشان دهیم (بگذارید یک div باشد)، که نسبت به ظرف اصلی قرار می گیرد.

.main ( موقعیت : نسبی ; z-index : 1 ; /* z-index کمتر از فوتر به طوری که قابل مشاهده باشد */) .popup ( موقعیت : مطلق ; z-index : 100 ; [ ...] ) .footer ( ارتفاع : 50px ; margin-top : -50px ; position : نسبی ; /* بنابراین می توانید z-index */ را تنظیم کنید z-index: 2; /* بیشتر از اصلی برای قابل مشاهده بودن */}

همه چیز خوب است تا زمانی که پنجره پاپ آپ و پاورقی ما با هم تلاقی پیدا کنند (و این وضعیت اغلب اتفاق می افتد) - از اینجاست که مشکلات شروع می شوند. علیرغم این واقعیت که پنجره پاپ آپ دارای بالاترین z-index است، با فوتر همپوشانی خواهد داشت، زیرا پنجره والد دارای z-index کمتر از پاورقی است:

در این مورد، باید به دنبال فرصتی باشید تا پنجره را نه نسبت به اصلی، بلکه نسبت به عنصر فرزند دیگری که در داخل اصلی قرار دارد، قرار دهید. بنابراین، از تعیین z-index برای main و footer خلاص خواهیم شد. اما این گزینه همیشه امکان پذیر نیست، بنابراین بیایید گزینه دوم فشار دادن فوتر را در نظر بگیریم.

راه حل 2 - موقعیت یابی مطلق

ایده مشابه راه حل 1 است:

بلوک اصلی را به تمام ارتفاع صفحه کشش می دهیم.
ما فضایی را برای زیرزمین رزرو می کنیم.
نسبت به بلوک اصلی، زیرزمین را با استفاده از موقعیت مطلق در پایین قرار می دهیم.

HTML:نسبت فامیلی ؛ /* به طوری که عناصر فرزند نسبت به این بلوک قرار می گیرند */) .footer (ارتفاع: 50px؛ موقعیت: مطلق؛ سمت چپ: 0؛ پایین: 0؛ عرض: 100%؛ ) * html.footer ( bottomy: express(parentNode.offsetHeight % 2 ? style.bottom= "-1px": style.bottom= "0px" ); /* هک برای e6 که دارای یک جاب با افست 1 پیکسل است */}

این روش مشکل پنجره های پاپ آپ را حل می کند، زیرا ... هم فوتر و هم پاپ آپ یک والد مشترک خواهند داشت، به این معنی که هیچ شگفتی با لایه های z وجود نخواهد داشت.

عیب هر دو روش این است که هر دو روش فقط برای یک زیرزمین با ارتفاع ثابت مناسب هستند.

برای امروز کافی است. اکنون می دانید که چگونه فوتر را به روش های مختلف به پایین صفحه فشار دهید و چه مشکلاتی ممکن است ایجاد شود.

در به روز رسانی ها مشترک شوید و منتظر انتشارات جدید جالب باشید. خدا حافظ.

پاورقی را به پایین صفحه فشار دهید. الزامات:

وقتی ارتفاع پنجره مرورگر بیشتر از ارتفاع صفحه باشد، بدون توجه به محتوا، پاورقی به پایین صفحه فشار داده می شود.
زمانی که حجم محتوا از ارتفاع پنجره مرورگر بیشتر باشد، فوتر در جای مناسب خود قرار می گیرد
در تمام مرورگرهای محبوب کار می کند
قابلیت اطمینان - به پیچیدگی طرح بستگی ندارد

تئوری

تمرین خوبی است که کل قسمت موجود از صفحه مرورگر را با سایت پر کنید (حداقل از نظر ارتفاع برای طرح هایی که از نظر عرض ثابت هستند).

راه حل

مرحله 1

ما 2 بلوک می سازیم: اصلی (اصلی) و زیرزمین (پایین). محفظه اصلی را به تمام ارتفاع صفحه مرورگر کش می دهیم () و ارتفاع پاورقی () را به طور محکم مشخص می کنیم.

در این حالت، ارتفاع کل سایت، ارتفاع صفحه نمایش + ارتفاع فوتر خواهد بود.

گام 2

یادداشت: هنگام استفاده از طرح بندی بلوک و بلوک های اصلی شناور (ستون ها) برای hFooter، باید : هر دو را اضافه کنید تا پاورقی در زیر ستون ها قرار گیرد.:

HFooter ( واضح: هر دو؛ ارتفاع: 40 پیکسل؛ )

تست شده در:

یادداشت 1:اگر قبلاً کمی به CSS تسلط داشته باشید، ممکن است این سوال پیش بیاید: "چرا اگر می توانید از یک عنصر اضافی استفاده کنید؟". پاسخ این است که شما نمی توانید فقط از آن در اینجا استفاده کنید، زیرا ... اندازه یک بلوک برابر است با عرض و ارتفاع آن + مجموع لایه های داخلی + مجموع ضخامت های حاشیه. لینک: 100% و ارتفاع سایت را بیشتر از ارتفاع صفحه نمایش می دهد. در نتیجه، حتی اگر اصلاً محتوا وجود نداشته باشد، پاورقی خارج از "صفحه اول" خواهد بود. برای چگونگی دور زدن این موضوع به زیر مراجعه کنید.

تبصره 2.در اپرا نسخه 9.5 و بالاتر، این مثال هنگام افزودن doctype کار نخواهد کرد. گزینه های راه حل:

حداقل یک بلوک شناور به تگ کانتینر اصلی اضافه کنید:

این بلوک اصلی است

اینجا زیرزمین است
دو ویژگی برای html، body اضافه کنید:
Html، بدنه (ارتفاع: 100%؛ شناور: سمت چپ؛ عرض: 100%؛ )
استایل ها را در یک فایل CSS جداگانه قرار دهید:

به روز رسانی 8.12.09 - معایب این تکنیک

این استفاده از یک عنصر خالی اضافی hFooter است. در شرایط واقعی (زمانی که محتوای سایت خالی نیست و از طرح بندی بلوک استفاده می شود)، می توان با استفاده از این امر اجتناب کرد - این مثال به پاک کردن جریان بدون استفاده از عنصر اضافی کمک می کند و به طوری که محتوا در صفحه قرار نمی گیرد. فوتر، آن را در ستون ها می نویسیم

به روز رسانی 12/28/09 - مشکلات با لایه های z

در تکنیکی که در بالا توضیح داده شد، پاورقی با یک فرورفتگی منفی به سمت بالا بالا آمده است. این یک مشکل بالقوه با لایه های z ایجاد می کند. به عنوان مثال، ما باید یک پنجره بازشو نشان دهیم (بگذارید div class="popup") باشد که نسبت به ظرف اصلی قرار می گیرد.

[...]

اصلی ( موقعیت: نسبی؛ /* به طوری که عناصر فرزند نسبت به این بلوک قرار می گیرند */ z-index: 1؛ /* z-index کمتر از پاورقی به طوری که قابل مشاهده باشد */ ) .popup ( موقعیت: مطلق; z-index : 100; [...] ) .footer (ارتفاع: 50px؛ margin-top: -50px؛ موقعیت: نسبی؛ /* به طوری که می توانید z-index */ z-index: 2; / را تنظیم کنید. * بزرگتر از آن اصلی که قابل مشاهده باشد */ )

همه چیز خوب است تا زمانی که پنجره پاپ آپ و زیرزمین تقاطع پیدا کنند (و این وضعیت اغلب اتفاق می افتد) - اینجاست که مشکلات شروع می شود. علیرغم این واقعیت که پنجره پاپ آپ دارای بالاترین z-index است، با فوتر همپوشانی خواهد داشت، زیرا پنجره والد دارای z-index کمتر از پاورقی است:

گزینه 1 - به دنبال فرصتی باشید تا پنجره را نه نسبت به اصلی، بلکه نسبت به عنصر فرزند دیگری که در اصلی قرار دارد، قرار دهید. بنابراین، از تعیین z-index برای main و footer خلاص خواهیم شد. اما این گزینه همیشه امکان پذیر نیست، بنابراین بیایید گزینه دوم فشار دادن فوتر را در نظر بگیریم.

راه حل 2 - موقعیت یابی مطلق

ایده مشابه راه حل 1 است:

بلوک اصلی را تا تمام ارتفاع صفحه بکشید
فضای ذخیره شده برای زیرزمین
نسبت به بلوک اصلی، زیرزمین را با استفاده از موقعیت مطلق در پایین قرار دهید

[...]

Html، بدنه ( ارتفاع: 100%؛ ) .main (min-ارتفاع: 100%؛ موقعیت: نسبی؛ /* به طوری که عناصر فرزند نسبت به این بلوک قرار گیرند */) .footer (ارتفاع: 50 پیکسل؛ موقعیت: مطلق; چپ: 0 ؛ پایین: 0؛ عرض: 100%؛ ) * html .footer ( bottomy:expression(parentNode.offsetHeight % 2 ? style.bottom="-1px" : style.bottom="0px"); /* هک برای e6، که دارای یک جاب با افست 1px */) است.

آموزش

همه کسانی که به صفحات وب سایت کاملاً طراحی شده عادت دارند، ظاهر چیزی «میخکوب شده» (چسبنده) را به پایین فوتر صفحه ترجیح می دهند. اما دو مشکل در اینترنت وجود دارد: فیلدهای ورودی که به سمت پایین رشد نمی کنند و فوترهایی که میخ نمی شوند (به پایین پنجره). به عنوان مثال، وقتی صفحات کوتاهی مانند habrahabr.ru/settings/social را باز می کنیم، فوراً به چشم می خورد که اطلاعات در نظر گرفته شده برای قرار گرفتن در پایین پنجره مشاهده به محتوا می چسبد و جایی در وسط یا حتی در بالای پنجره وقتی پایین خالی است.

بنابراین، به جای .
این راهنما برای طراحان چیدمان مبتدی نشان می دهد که چگونه در 45 دقیقه یک پاورقی «میخکوب» بسازید و کاستی های نشریه معتبری مانند Habr را اصلاح کنید و با آن در کیفیت اجرای پروژه امیدوارکننده خود رقابت کنید.

بیایید به اجرای یک نوع فوتر میخکوب شده که از شبکه گرفته شده است نگاه کنیم و سعی کنیم بفهمیم چه اتفاقی در حال رخ دادن است. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, body, #wrap ( ارتفاع: 100%؛ ) body > #wrap (ارتفاع: خودکار؛ حداقل ارتفاع: 100%؛) #main ( padding-bottom: 150px; ) /* باید همان ارتفاع پاورقی باشد */ #footer ( موقعیت: نسبی؛ حاشیه بالا: -150 پیکسل؛ /* مقدار منفی ارتفاع پاورقی */ ارتفاع: 150 پیکسل؛ واضح: هر دو؛) /* CLEAR FIX* / .clearfix:after (محتوا: "."؛ نمایش: بلوک؛ ارتفاع: 0؛ روشن: هر دو؛ مشاهده: پنهان؛) .clearfix (نمایش: inline-block;) /* از IE-mac پنهان می شود \*/ * html .clearfix (ارتفاع: 1%).
HTML:

بعید است که همه، حتی کسانی که CSS می دانند، با نگاه کردن به این کد، اصول را درک کنند و با اطمینان یک پروژه پیچیده را ویرایش کنند. هر گامی به سمت جلو منجر به عوارض جانبی خواهد شد. بحث و ساخت فوتر زیر برای درک بیشتر قوانین CSS در نظر گرفته شده است.

بیایید با تئوری شروع کنیم

پیاده سازی معمول یک پاورقی میخکوبی متکی به ویژگی منحصر به فرد CSS2 است که عناصر فرزندان مستقیم آن هستند. بدن- حفظ درصد ارتفاع ( ارتفاع: 100%یا دیگری) نسبت به پنجره، اگر همه والدینشان درصد قد یکسانی داشته باشند، با شروع از برچسب HTML. قبلاً، بدون doctypes، اما اکنون در حالت Quirks، درصد ارتفاع عناصر در هر سطحی پشتیبانی می‌شود و در doctypes مدرن - فقط در عناصر درصد تعریف شده. بنابراین، اگر یک بلوک محتوا ایجاد کنیم (بیایید آن را صدا کنیم #چیدمان) با داشتن 100% ارتفاع، طوری حرکت می کند که انگار یک پنجره است. تمام مطالب (استریمینگ) در آن قرار می گیرد، به جز پاورقی و شاید هدر.

فوتر بعد از این بلوک قرار می گیرد و ارتفاع آن 0 پیکسل است. به طور کلی می توانید دنبال کنید #چیدمانهر تعداد بلوک را که دوست دارید قرار دهید، اما همه آنها باید یا 0 پیکسل ارتفاع داشته باشند یا خارج از جریان سند باشند (نه موقعیت: ایستا). و ترفند مهم دیگری نیز وجود دارد که معمولا از آن استفاده می شود. لازم نیست ارتفاع را برابر با 0 کنید. می توانید ارتفاع را ثابت کنید، اما با استفاده از ویژگی آن را از بلوک اصلی کم کنید. حاشیه-پایین: -(ارتفاع);.

از نظر انسانی، سبک‌ها یک «جیب» خالی در پایین ایجاد می‌کنند، که پاورقی در آن قرار می‌گیرد، و همیشه یا به حاشیه پایین پنجره می‌چسبد یا به حاشیه پایین سند، اگر ارتفاع سند بزرگتر از ارتفاع پنجره است. پیاده‌سازی‌های پاورقی زیادی در اینترنت و Habré وجود دارد که درجات مختلف موفقیت در همه مرورگرها وجود دارد. بیایید خودمان به ساختن آن ادامه دهیم و از طرح هابر به عنوان «اسب کار» استفاده کنیم.

زیرا پایین بلوک #چیدمان- این یک جیب است، برای فوتر باید خالی باشد، اشیاء صفحه نمایش داده نشود. و در اینجا با محدودیت دیگری روبرو می شویم - ما نمی توانیم یک جیب خالی در هزینه ایجاد کنیم لایه گذاری V #چیدمان، زیرا در این صورت بیش از 100٪ می شود. این شما را نیز نجات نخواهد داد لبه- خالی بودن باید با استفاده از ویژگی های عناصر تو در تو ایجاد شود. به علاوه، لازم است اطمینان حاصل شود که عناصر شناور زیر مرز بلوک نمی خزند، که برای مثال توسط بلوک انجام می شود.

، جایی که .clear (روشن: هر دو). مهم است که یا این " ارتفاع" ثابت شد، یا در واحدهای نسبی یکسان، یا آن را در طول تغییرات صفحه محاسبه می‌کردیم. معمولاً ترکیب این بلوک تراز با تنظیم آن در ارتفاع مورد نیاز راحت است.

بیایید به ساختار صفحات موضوع آزمون خود نگاه کنیم. ساده ترین راه برای انجام این کار، باز کردن پنجره Firebug یا پنجره مشابه (ابزارهای توسعه دهنده (Ctrl-F12)) در کروم است.

... بلوک تبلیغاتی برتر ...

بیایید به یک مثال کاری برویم

کدام را می بینیم؟ نقص های چیدماناز نظر اجرای افکت پاورقی میخکوب شده؟ ما آن را می بینیم
1) فوتر سایت داخل بلوکی با id=layout قرار دارد که درصد ارتفاع ندارد. طبق تئوری، او، والدین و محتوای block.content-left باید ارتفاع را روی 100% تنظیم کنند. مشکلات با دومی ایجاد می شود - برای این مناسب نیست. در نتیجه، یک بلوک بین لایه ای وجود ندارد یا پاورقی در سطح مناسبی قرار ندارد. بعلاوه،
2) ارتفاع پاورقی متغیر است (بسته به تعداد عناصر موجود در لیست و اندازه فونت، این را می توان نه از HTML، بلکه از CSS مشاهده کرد). و
3) در بالا #چیدمانیک بلوک تبلیغاتی با ارتفاع ثابت 90 پیکسل وجود دارد.
4) هیچ بلوک تراز یا در فوتر یا (به طور کلی) در بلوک وجود ندارد #چیدمان(بله، اما بالای بلوک rotated_posts; با این حال، شاید باید به عنوان پاورقی طبقه بندی شود).

نکته 4 - باید آن را با یک اسکریپت بکشید.
به نظر می رسد با اضافه کردن #layout (margin-top:-90px;) با سومین نکته کنار بیایید، اما به یاد داشته باشید که این بلوک ممکن است وجود نداشته باشد - با برش بنر سرکوب می شود، یا تبلیغ کنندگان ناگهان تصمیم می گیرند آن را نشان ندهند. تعدادی صفحه در سایت وجود دارد که در آنها وجود ندارد. بنابراین وابستگی حاشیه بالااز یک بلوک تبلیغاتی ایده بدی است. خیلی بهتره داخلش قرار بدید #چیدمان- پس او در هیچ چیز دخالت نخواهد کرد.

اولین نکته این است که برای اینکه فوتر میخکوبی شده اصلا کار کند، باید یک بلوک پاورقی را زیر آن قرار دهید. #چیدمان. با این حال، با کمک جاوا اسکریپت می توانید سایر طرح های فوتر میخ شده را پیاده سازی کنید، اما در هر صورت برای انجام بدون آن به JS یا طرح اولیه درست نیاز دارید.

از آنجایی که نمی‌توانیم قوی‌تر از آخرین طراح صفحه‌آرایی وب‌سایت باشیم که پاورقی را در داخل محتوا «سیلی زده»، ایده قرار دادن درست پاورقی را در وب‌سایت آینده خود کنار می‌گذاریم (که در نتیجه «سردتر» خواهد بود. از Habr!)، و ما Habr را با جاوا اسکریپت (userscript) تا یک شرط صحیح تشریح می کنیم. (بیایید بلافاصله بگوییم که مقصر طراح چیدمان یا سوئیچر نیست، بلکه نوع سایت است که البته تصمیم استراتژیک مدیریت پروژه را تعیین می کند.) به این ترتیب به ایده آل نخواهیم رسید، زیرا در یکی دو ثانیه اول در طول فرآیند بارگذاری صفحه صفحه بندی نادرستی خواهد داشت. اما آنچه برای ما مهم است مفهوم و فرصت پیشی گرفتن از نظر کیفیت از محبوب ترین وب سایت در دنیای فناوری اطلاعات است.

بنابراین، در جای مناسب در اسکریپت (اوایل، در پایان بارگذاری صفحه)، انتقال بلوک های تبلیغاتی DOM و فوتر را به مکان های مناسب می نویسیم. (بیایید برای این واقعیت آماده باشیم که به دلیل اسکریپت های کاربر، راه حل پیچیده تر از یک راه حل خالص خواهد بود.)
var dQ = function(q)(return document.querySelector(q);) //برای کوتاه کردن var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ) if(topL && lay) //banner - داخل بلوک محتوا lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //Moving the footer lay.parentNode.insertBefore(footer, lay.nextSibling);
ما بلوک ها را در جای خود قرار داده ایم - اکنون تنها چیزی که باقی می ماند اختصاص دادن ویژگی های لازم به عناصر است. ارتفاع پاورقی باید دقیقاً تنظیم شود، فقط به این دلیل که ما در زمان فعال شدن اسکریپت کاربر (پایان بارگذاری صفحه) آن را می‌دانیم. با توجه به نقطه ماشه کاربر اسکریپت، همانطور که در بالا ذکر شد، جهش در نمایش فوتر در صفحه اجتناب ناپذیر است. آیا می توانید سعی کنید "چهره خوب" را به نمایش بگذارید، اما با یک "بازی بد"؟ برای چی؟ "بازی بد" سایت به شما امکان می دهد بدون تلاش اضافی یک مفهوم ایجاد کنید که برای ارزیابی کیفیت کافی است و برای "بازی صحیح" در پروژه شما مورد نیاز نخواهد بود.
if(foot)( //block-aligner

در فوتر h.apnd_el((clss:"clear", appendTo: footer)); var footH = foot.offsetHeight; //...و اندازه گیری ارتفاع پاورقی ) if(topL && lay && footer && lay.nextSibling)( //تراز کردن بلوک ارتفاع مورد نیاز در محتوا ("layout") h.apnd_el((clss:" clear", css:( height: (footH ||0) +"px"), appendTo: lay)); lay.style.minHeight = "100%"; h.addRules ("#layout(margin-bottom:- "+ footH +"px !important)html، بدن (ارتفاع:100%)")؛ )
در اینجا به خودمان اجازه دادیم که از یک تابع خودنویس استفاده کنیم h.apnd_el، که تقریباً همان کار را در jQuery انجام می دهد -
$("

").css((ارتفاع: footH ||0)).appendTo($(footer))
و سپس - یکی دیگر از عملکردهای معمولی اجرای قوانین CSS - h.addRules. اینجا نمی توانید بدون آن کار کنید، زیرا باید یک قانون را با " اعلام کنید !مهم"- دقیقاً به دلیل ویژگی های اولویت های سبک ها از اسکریپت کاربر.

با این تکه‌های کد، می‌توانیم پاورقی میخ‌شده را در اسکریپت کاربر ببینیم (پس از پرش به پایین) و نحوه ساخت طرح‌بندی صفحه را کاملاً درک کنیم. استفاده از طرح پرش به صورت روزانه ناخوشایند است، بنابراین توصیه می شود این کار را صرفاً برای نمایش و آزمایش انجام دهید. در اسکریپت کاربر HabrAjax، من یک اسکریپت مشابه را نصب کردم و آن را با تنظیمات "underFooter" می بستم (کادر موجود در لیست تنظیمات را قبل از "footer nailed to the bottom" علامت بزنید)، با نسخه 0.883_2012-09-12 شروع می شود.

آیا میخ زدن پاورقی بر نیاز به به‌روزرسانی سبک‌های ZenComment در صورت نصب تأثیر می‌گذارد؟ بله، این کار را می کند.با توجه به زنجیره پیچیده اولویت‌های سبک، که در آن سبک‌های درج شده توسط اسکریپت کاربر کمترین اولویت را دارند، مجبور شدیم سبک‌های کاربر را کمی تنظیم کنیم. ممکن هاکار با فوتر میخ دار اگر سبک های کاربری خود را (به 2.66_2012-09-12 +) به روز نکنید، فوتر به درستی کار نخواهد کرد.

مسدود کردن rotated_post (سه پست محبوب از گذشته) با فوتر منطقی تر به نظر می رسد، بنابراین در اسکریپت واقعی نیز به فوتر منتقل می شود.

نکته دوم (از لیست کاستی‌های طرح‌بندی) صرفاً برای Habr است (در مورد اسکریپت کاربر صدق نمی‌کند و تا حدی موارد قبلی را تکرار می‌کند).

صفحات مشکلی دارند که مانع از ایجاد پاورقی میخ‌شده با استفاده از CSS خالص می‌شود - ارتفاع پاورقی نامشخص بسته به اندازه فونت پیش‌فرض در مرورگر. برای پیاده‌سازی فوتر با استفاده از CSS، باید ارتفاع نسبی فونت‌ها را انتخاب کنید، اما اگر رایانه کاربر فونت‌های لازم را نداشته باشد، ممکن است کار نکنند. بنابراین، راه حل باید شامل یک جاوا اسکریپت باشد که بتواند موقعیت تقریبی فوتر را با استفاده از ترانزیشن ها به موقعیت دقیق تنظیم کند. یا پس از بررسی مقبولیت راه حل ساخته شده در یک اسکریپت کاربر در پلتفرم های مختلف، یک نصب حساب شده از یک فوتر میخکوب شده انجام دهید - مشاهدات اولیه نشان می دهد که راه حل کاربردی است.

نتیجه گیری: امکان طراحی کامل یک چیدمان بر روی Habré وجود دارد، اما برای این کار به یک طراح چیدمان نیاز دارید که به وضوح رفتار چیدمان را درک کند و بلوک ها را به ترتیب صحیح قرار دهد. (در حال حاضر پاورقی و بنر بالای صفحه "در جای اشتباه" قرار دارند و به گونه ای نیستند که بتوانید فقط به پاورقی شکل دهید.) اگر ارتفاع فوتر را در واحدهای نسبی تنظیم کنید، می توانید بدون JS این کار را انجام دهید. فضایی برای عدم قطعیت فونت

پیاده سازی

اگر HabrAjax 0.883+ را فعال کنید، ما شاهد کارکرد "پانویس میخکوب" خواهیم بود. با استفاده از اسکریپت ها ارتفاع را تطبیق می دهد. این به شما امکان می دهد تا ارزیابی کنید که صفحات با فوتر میخ شده در مقایسه با صفحات معمولی چقدر بهتر است. سبک‌های کاربر ZenComment با اسکریپت‌ها سازگار هستند، اما برای اینکه فوتر میخ‌شده به درستی با آنها کار کند، باید ZenComment نسخه 2.66_2012-09-12 + را نصب کنید.

حقایقی در مورد رفتار پیاده سازی

شمنیسم با پاورقی، سبک ها و اسکریپت ها شمنیسم است (فقط توسط نظریه پشتیبانی می شود). این رفتار در مرورگرهای مختلف کمی متفاوت است، اما در برخی جاها غیرمنتظره است. بدون اسکریپت های کاربر و بلاک های تنظیم مجدد، نتایج متفاوت خواهد بود. این همان چیزی است که آزمایش‌های پیاده‌سازی در اسکریپت کاربر به دست آمد.

1) فایرفاکس - عدم پرش غیرمنتظره پاورقی. عجیب است که آنها آنجا نیستند - رندر پس از قرار دادن پاورقی در پایین رخ می دهد.

2) کروم - با "پیمایش سرگردان" من را شگفت زده کرد - فضاهای خالی در پایین با دوره زمانی یک بار در ثانیه به صفحه اضافه می شود - اشتباهی در محاسبه ارتفاع اتفاق می افتد. راه حل این است که html،body(height:100%) را به سبک کاربر بنویسید، اما هیچ تضمینی وجود ندارد که همیشه کار کند. قابل اعتمادتر است که بررسی کنید آیا سند از ارتفاع پنجره تجاوز نمی کند یا خیر، و اگر اینطور نیست، فوتر را حرکت دهید، در غیر این صورت - هیچ چیز. پریدن اشکالی ندارد، وجود دارد.

3) Opera - بدون پرش (نسخه 12.02) هنگامی که صفحه برای اولین بار بارگیری می شود، اما بارگذاری مجدد عجولانه ممکن است یک پرش پاورقی را نشان دهد. در غیر این صورت رفتار آن کمتر از Fx نیست.

خوب، شما باید به طور خاص به Chrome آموزش دهید که به درستی (با یک اسکریپت) رفتار کند و نسخه را در این فرم برای نمایش منتشر کنید. بنابراین، بخش در اسکریپت کاربر کمی پیچیده تر از قسمت ارائه شده در مقاله است.

لازم به یادآوری است که این یک پیاده سازی کامل نیست - به عنوان مثال موارد تغییر اندازه پنجره توسط کاربر را در نظر نمی گیرد. همچنین می‌توانید ترکیب‌های نادری (در عمل) از تغییر ارتفاع پاورقی قبل و بعد از حرکت پیدا کنید، جایی که منطق بدون ایجاد ناراحتی شروع به شکست می‌کند. کاستی‌ها عمداً رها شدند، زیرا تعادل بین پیچیدگی بهبود و ماهیت موقت راه‌حل حفظ شد.

در نتیجه، ما یک طرح عملیاتی کاملاً قابل اجرا، حداقل برای رایانه‌های رومیزی سریع، به دست آوردیم. اگر رفتار نادرست پاورقی تشخیص داده شود، تنظیم "underFooter" باید غیرفعال شود.

این برای چه صفحاتی مفید است؟

در یک وب‌سایت استاندارد، بدون سبک‌های کاربری، حتی صفحات پرسش و پاسخ کوتاه، طولانی‌تر از 1500 پیکسل هستند که در اکثر موارد با نمایشگرهای افقی قابل توجه نیست. اما حتی با مانیتورهای معمولی، اغلب با صفحات کاربری شخصی با ارتفاع حدود 1300 پیکسل مواجه می شوید که در آن فوتر بدون اتصال با شکوه ظاهر می شود. تعداد صفحات در تنظیمات کاربر نیز زیاد نیست.

اگر از سبک‌های کاربری ZenComment استفاده می‌کنید، ارتفاع صفحه مورد نیاز را تا حد زیادی کاهش می‌دهند و اسکریپت کاربر HabrAjax ممکن است برخی یا همه بلوک‌های جانبی را در نوار کناری نشان ندهد. بنابراین، با اسکریپت‌ها و سبک‌ها، تأثیر پاورقی بدون پیوست به طور قابل توجهی بیشتر مشاهده می‌شود. بنابراین منطقی است که رفع فوتر برای اولین بار در HabrAjax ظاهر شود. اما یک وب سایت معمولی همچنین دارای تعدادی صفحه است که در آنها فوتر میخکوب شده مفید خواهد بود.

آیا حمایت خواهد شد؟

رفتار سایت در سال گذشته نشان می دهد که توسعه دهندگان (و بنابراین مدیریت) شروع به معرفی ویژگی هایی کردند که قبلاً فقط در اسکریپت های کاربر و سبک های کاربر وجود داشت. به عنوان مثال، در ابتدای سال نوشتم که در آن بسیاری از آرزوهای کوچک را جمع آوری کردم. شش ماه بعد، من به آن بازگشتم و با خوشحالی متوجه شدم (در متن، می توانید "UPD" و تاریخ ها را ببینید) که تعدادی از ویژگی های توصیف شده به عنوان آرزوها قبلاً در سایت پیاده سازی شده بودند.

در مرحله بعد، بیایید به جای مربع برای امتیاز دهی به "فلش ها" نگاه کنیم. آنها 3 سال پیش در نام های کاربری almalexa ("Prettifier") ظاهر شدند و 2 سال پیش در ZenComment پذیرفته شدند. حدود 2-3 ماه پیش در سایت ظاهر شدند. یکی شروع می کند به این باور که بعد از مدتی فلش ها با فاصله ای از یکدیگر فاصله می گیرند، همانطور که در ZenComment انجام می شود (یک فلش به سمت چپ عدد، دومی به سمت راست) به منظور از دست دادن کمتر. افزودن برچسب

ولاد مرژویچ

در اصطلاح توسعه دهندگان وب، پاورقی قسمت پایینی سایت است که در آن حق چاپ نوشته می شود، مخاطبین منتشر می شوند، شمارنده های مختلف نمایش داده می شوند و اطلاعات مشابه. به طور معمول، پاورقی بعد از همه محتوا قرار دارد و فقط هنگام پیمایش صفحه قابل مشاهده است. در برخی موارد، مطلوب است که بدون در نظر گرفتن ارتفاع صفحه، فوتر همیشه در دسترس باشد و آن را در پایین پنجره مرورگر ثابت کنید.

برای این کار، از ویژگی position و مقدار ثابت آن استفاده می کنیم. در این حالت، عنصر در یک مکان باقی می‌ماند و موقعیت آن توسط مختصات از طریق خصوصیات بالا، راست، پایین، چپ مشخص می‌شود. در مورد ما، کافی است مقادیر سمت چپ و پایین را صفر کنیم. عرض عناصر ثابت برابر با محتوای آنها است که در صورت اضافه کردن رنگ پس زمینه یا تصویر به وضوح قابل مشاهده است، بنابراین باید عرض را نیز با استفاده از عرض 100% تنظیم کنید (مثال 1).

مثال 1: زیرزمین ثابت

زیرزمین ثابت

تمامی روش های صید شیر که در سایت ذکر شده است تئوری و مبتنی بر روش های محاسباتی می باشد. نویسنده ایمنی شما را هنگام استفاده از آنها تضمین نمی کند و مسئولیت نتایج را از خود سلب می کند. به یاد داشته باشید، شیر یک حیوان درنده و خطرناک است!

نتیجه مثال در شکل نشان داده شده است. 1.

برنج. 1. پاورقی در پایین صفحه

Internet Explorer 6 مقدار ثابت را پشتیبانی نمی کند، بنابراین این مثال به درستی در آن کار نخواهد کرد. برای IE6 باید دو تگ به کد اضافه کنید

، آنها را در داخل محفظه های محتوا و پاورقی قرار دهید و همچنین سبک دیگری را مخصوص این مرورگر قرار دهید (مثال 2).

مثال 2: کد با IE6 در ذهن

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

زیرزمین ثابت

تمامی روش های صید شیر که در سایت ذکر شده است تئوری و مبتنی بر روش های محاسباتی می باشد. نویسنده ایمنی شما را هنگام استفاده از آنها تضمین نمی کند و مسئولیت نتایج را رد می کند. به یاد داشته باشید، شیر یک حیوان درنده و خطرناک است!

این مثال از قدر مطلق ویژگی position استفاده می کند. با موقعیت یابی مطلق، یک عنصر را می توان در هر جایی از پنجره مرورگر قرار داد، اما با محتوا حرکت می کند. این تفاوت اصلی بین مقادیر ثابت و مطلق است. برای جلوگیری از جابجایی فوتر، ارتفاع صفحه روی 100% تنظیم می شود و هر چیزی که با ابعاد فعلی پنجره نمی گنجد، قطع می شود. در این مورد، نوار اسکرول عمودی ناپدید می شود؛ باید با استفاده از سرریز به محتوا اضافه شود.

یکی دیگر از لحظات ناخوشایند، همپوشانی پس‌زمینه فوتر روی نوار اسکرول است، بنابراین باید تورفتگی مناسب را روی عرض نوار اسکرول تنظیم کنید. علاوه بر این، اگر نوار اسکرول وجود نداشته باشد، یک سوراخ در زیرزمین در سمت راست وجود خواهد داشت.

02.05.15 21.5K

این یک جور کابوس است! چرا پاورقی سایت شما دوباره ظاهر می شود و طراحی را تغییر می دهد؟ آیا واقعاً غیرممکن است که با چیزی فوتر را به درستی به پایین صفحه فشار دهید؟ محتوا یا آجر حداقل! آجر در مانیتور جا نمی شود؟

می بینم، سپس بنشین و هیچ کاری نکن تا اینکه مقاله ما را تا آخر بخوانید.

ساخت فوتر مناسب برای وب سایت شما

بسیاری از صاحبان وب سایت زمانی با این مشکل مواجه می شوند که فوتر صفحه به سادگی در بالای صفحه شناور شود. و بعد معلوم نیست چه باید کرد. اغلب، طراحی‌های وب‌سایتی که با عجله و به تنهایی کنار هم قرار گرفته‌اند، از این اشکال رنج می‌برند ( دور "دست های دیوانه") یا وب مسترهای تازه کار.

در همان زمان، هیچ چیز وحشتناکی در مراحل اولیه زندگی سایت اتفاق نمی افتد. و این طلسم تا زمانی ادامه می یابد که محتوا «وزن» خود را به زیرزمین می اندازد و از بالا آمدن آن جلوگیری می کند. اما ارزش آن را دارد که حجم کمتری از مطالب را در صفحه قرار دهید، و فوتر "آرام" اخیراً فوراً به سمت بالا بالا می رود و کل طراحی سایت را به ظاهری نامناسب تبدیل می کند.

برای رفع این "نقص" قالب طراحی شده، نیازی به صرف هزینه برای خدمات یک وب مستر نیست. اغلب اوقات، پاورقی سایت را می توانید خودتان در محل قرار دهید. بیایید همه گزینه های ممکن را برای از بین بردن این مشکل در نظر بگیریم:

راه اول

اولین راه برای "پیوند دادن" پاورقی "به پایین" صفحه بر اساس CSS است. بیایید با کد مثال شروع کنیم و سپس به پیاده سازی آن نگاهی دقیق بیندازیم:

html ( ارتفاع: 100%؛ ) سرصفحه، ناوبری، بخش، مقاله، کنار، پاورقی (نمایش: بلوک؛) بدنه (ارتفاع: 100%؛ ) #wrapper (عرض: 1000 پیکسل؛ حاشیه: 0 خودکار؛ حداقل ارتفاع: 100 ٪؛ ارتفاع: خودکار !مهم؛ ارتفاع: 100٪؛ ) #هدر (ارتفاع: 150 پیکسل؛ رنگ پس‌زمینه: rgb(0,255,255)؛ ) #content (بالشتک: 100px؛ ارتفاع:400px؛ پس‌زمینه رنگ: rgb(51,255,10) ; ) #پانویس (عرض: 1000 پیکسل؛ حاشیه: -100 پیکسل خودکار 0؛ ارتفاع: 100 پیکسل؛ موقعیت: نسبی؛ رنگ پس‌زمینه: rgb (51،51،204)؛ )