پاورقی در پایین صفحه css. زیرزمین ثابت

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

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

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

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

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

بنابراین، در جای مناسب در اسکریپت (اوایل بارگذاری صفحه)، انتقال بلوک های تبلیغاتی 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 سال پیش در usersils ("Prettifier") ظاهر شدند و حدود 2 سال پیش در ZenComment پذیرفته شدند. حدود 2-3 ماه پیش در سایت ظاهر شدند. یکی شروع می کند به این باور که بعد از مدتی فلش ها با فاصله ای از یکدیگر فاصله می گیرند، همانطور که در ZenComment انجام می شود (یک فلش به سمت چپ عدد، دومی به سمت راست) به منظور از دست دادن کمتر.

سبک های کاربری

هابرآژاکس

افزودن برچسب

• آموزش

همه کسانی که به صفحات وب سایت کاملاً طراحی شده عادت دارند، ظاهر چیزی «میخکوب» (چسبنده) را به پایین پاورقی صفحه ترجیح می دهند. اما دو مشکل در اینترنت وجود دارد: فیلدهای ورودی که به سمت پایین رشد نمی کنند و فوترهایی که میخ نمی شوند (به پایین پنجره). به عنوان مثال، وقتی صفحات کوتاهی مانند 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)) در کروم است.