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

24.06.2019 ویندوز فون

ولاد مرژویچ

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

برای این کار، از ویژگی 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% تنظیم می شود و هر چیزی که با ابعاد فعلی پنجره نمی گنجد، قطع می شود. در این مورد، نوار اسکرول عمودی ناپدید می شود؛ باید با استفاده از سرریز به محتوا اضافه شود.

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

آموزش

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

آموزش

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

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

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

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

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

پیاده سازی

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

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

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

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

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

هابرآژاکس

افزودن برچسب

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

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

چه مشکلاتی با چیدمان وب سایت خود داشتیم؟

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

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

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

آن ها رفتار صحیح پاورقی برای مقدار کمی اطلاعات در صفحه و صفحه کاربری بزرگ به صورت زیر خواهد بود:

برای پیاده سازی این، باید تعدادی دستکاری با کد طرح خود انجام دهیم. علاوه بر این، ما نه تنها در فایل سبک CSS Style.css، بلکه در Index.html که حاوی کد Html است و بلوک های Div را تشکیل می دهد نیز تغییراتی ایجاد خواهیم کرد. اما اول از همه.

به عنوان مثال، از طرح بندی وب سایت سه ستونی که قبلا ایجاد کردیم استفاده خواهیم کرد. در این حالت Index.html به شکل زیر خواهد بود:

سرفصل

محتویات صفحه محتویات صفحه محتویات صفحه محتویات صفحه

و خصوصیات CSS زیر در فایل Style.css نوشته شده است:

بدنه، html ( حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛ ) #maket ( عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛ ) #سرصفحه (رنگ پس‌زمینه:#C0C000؛ ) #چپ (رنگ پس‌زمینه:#00C0C0؛ عرض: 200 پیکسل ؛ شناور: چپ؛ ) #راست(عرض: 200 پیکسل؛ رنگ پس‌زمینه:#FFFF00؛ شناور: راست؛ ) #محتوا (رنگ پس‌زمینه:#8080FF؛ حاشیه-چپ: 202 پیکسل؛ حاشیه-راست: 202 پیکسل؛ ) #پانویس (رنگ پس‌زمینه: #FFC0FF؛ واضح: هر دو؛ )

خوب، خود طرح چیزی شبیه به این بود:

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

نحوه فشار دادن پاورقی به پایین طرح‌بندی وب‌سایت

بنابراین، باید ظرف Div را با فوتر به پایین صفحه منتقل کنیم. برای این کار ابتدا باید ارتفاع کل صفحه را صد در صد تنظیم کنید (کل صفحه را اشغال می کند). این برای تغییر اندازه بلوک اصلی با طرح به 100٪ ضروری است.

کل محتوای صفحه سایت در باز و بسته شدن تگ Body قرار می گیرد و بنابراین باید ویژگی CSS دیگری را برای تگ Body در Style.css اضافه کنیم و ارتفاع را روی 100% تنظیم کنیم:

بدنه، html (حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛ ارتفاع: 100٪؛ )

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

ویژگی های اصلی CSS، در صورت تمایل، می توانید به آن نگاه کنید. حال بیایید ظرف Div را که کل طرح ما را در بر می گیرد روی حداقل ارتفاع 100٪ تنظیم کنیم:

من همچنین می خواهم آن را برجسته کنم (div با id="maket"). برای انجام این کار، با استفاده از ویژگی Border() مربوطه به آن یک فریم می دهم:

حاشیه: ویژگی مشکی جامد 3px به شما امکان می دهد یک حاشیه جامد (جامد) به ضخامت 3 پیکسل به رنگ سیاه برای این ظرف تنظیم کنید. این به شما این امکان را می دهد که به وضوح ببینید که کانتینر با چیدمان تا تمام ارتفاع صفحه کشیده شده است، حتی با مقدار کمی اطلاعات در صفحه:

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

سرفصل

ستون سمت چپ منو منو منو منو منو

ستون سمت راست منو منو منو منو منو

محتویات صفحه محتویات صفحه محتویات

لطفاً توجه داشته باشید که بلوک با پاورقی دیگر در داخل کانتینر عمومی (maket) قرار ندارد و بنابراین عرض آن دیگر توسط ویژگی های CSS مشخص شده برای maket در فایل Style.css تنظیم نمی شود. عرض پاورقی در کل صفحه کشیده می شود، اما همچنان در پایین صفحه، بلافاصله زیر بلوک اصلی قرار دارد:

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

این به این دلیل اتفاق می افتد که ظرف اصلی (maket) تمام ارتفاع صفحه را اشغال می کند (این با ویژگی min-height: 100٪ مشخص می شود) و فوتر بلافاصله در پشت آن قرار دارد و برای مشاهده آن باید اسکرول کنید. خیلی راحت و کاربردی نیست.

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

اما برای تنظیم یک افست منفی از بالا، باید همین ارتفاع فوتر را بدانید، اما ما هنوز آن را نمی دانیم.

بنابراین، ابتدا ارتفاع محفظه حاوی فوتر را با تنظیم ویژگی مربوطه در Style.css تعیین می کنیم:

#footer( رنگ پس زمینه: #FFC0FF؛ واضح: هر دو؛ ارتفاع: 50 پیکسل؛ )

و سپس یک حاشیه منفی برای آن در بالا به ارتفاعی برابر با ارتفاع آن قرار می دهیم:

این به پاورقی اجازه می‌دهد تا دقیقاً تا ارتفاع خودش بالا برود و در نتیجه در صفحه مرورگر قرار بگیرد (اکنون می‌توانیم مرز ویژگی CSS: 3 پیکسل سیاه یکپارچه را از قانون maket حذف کنیم، به طوری که ضخامت حاشیه مانع از کل ما نشود. چیدمان، از جمله پاورقی، از قرار گرفتن در ارتفاع صفحه):

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

اسپیسر را وارد می کنیم و با اینترنت اکسپلورر مبارزه می کنیم

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

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

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

راه حل این مشکل اضافه کردن یک ظرف Div خالی جدید (به اصطلاح فاصله دهنده ها) به محفظه اصلی طرح ما (مکت)، در محلی که بلوک با فوتر قبلاً قرار داشت.

با تنظیم این کانتینر جدید در ارتفاعی برابر با ارتفاع فوتر، می توانیم از برخورد اطلاعات کانتینر اصلی با بلوک با فوتر جلوگیری کنیم. بیایید یک ID () به این کانتینر به نام Rasporka اختصاص دهیم و در نتیجه Index.html طرح سه ستونی ما به شکل زیر خواهد بود:

سرفصل

ستون سمت چپ منو منو منو منو منو

ستون سمت راست منو منو منو منو منو

محتویات صفحه محتویات صفحه محتویات صفحه صفحات صفحات صفحات صفحات صفحات صفحات

و در Style.css برای این می نویسیم ( ، که ارتفاع این ظرف فاصله را برابر با ارتفاع زیرزمین قرار می دهد:

#راسپورکا ( ارتفاع: 50 پیکسل؛ )

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

به این ترتیب از برخورد و اعوجاج در طرح سه ستونی خود جلوگیری می کنیم. همه چیز واضح و زیبا خواهد بود (لطیف و نجیب):

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

منطقی است که با استفاده از ویژگی Width، عرض را برابر با عرض کل طرح بندی قرار دهیم، و تراز افقی را می توان به همان روشی که برای کل طرح در یک طرح بلوکی انجام دادیم انجام داد.

بنابراین، ما باید ویژگی های اضافی را برای پاورقی ID اضافه کنیم:

#footer( رنگ پس زمینه: #FFC0FF؛ واضح: هر دو؛ ارتفاع: 20 پیکسل؛ حاشیه بالا: -20 پیکسل؛ عرض: 800 پیکسل؛ حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛ )

با استفاده از ویژگی width:800px، عرض روی 800 پیکسل تنظیم می شود و با استفاده از دو ویژگی margin-left: auto و margin-right: auto، تورفتگی در سمت چپ و راست فوتر به طور خودکار تنظیم می شود، در نتیجه که این تورفتگی‌ها برابر خواهند بود و قهرمان ما در وسط قرار می‌گیرد:

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

همه اینها به این دلیل اتفاق می‌افتد که ( ویژگی min-height: 100% را درک نمی‌کند، که از آن برای تنظیم حداقل ارتفاع بلوک اصلی برابر با ارتفاع صفحه استفاده کردیم.

بنابراین، برای حل این مشکل باید از یک هک به اصطلاح استفاده کنیم که به ما امکان می دهد (در انگشتان خود) به مرورگرهای قدیمی توضیح دهیم که چه کاری انجام دهند. قبل از لیست ویژگی های CSS برای maket، باید ترکیب زیر را وارد کنید:

* html #maket ( ارتفاع: 100%؛ )

این قانون فقط برای مرورگر اینترنت اکسپلورر 6 اعمال می شود، دیگران آن را در نظر نمی گیرند و اجرا نمی کنند.

بنابراین، ظاهر نهایی Style.css با فشار دادن پاورقی در پایین صفحه به صورت زیر خواهد بود:

بدنه، html ( حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛ ارتفاع: 100٪؛ ) * html #maket ( ارتفاع: 100٪؛ ) #maket ( عرض: 800 پیکسل؛ حاشیه: 0 خودکار؛ حداقل ارتفاع: 100٪؛ ) # عنوان ( رنگ پس زمینه:#8080FF؛ حاشیه-چپ: 202 پیکسل؛ حاشیه-راست: 202 پیکسل؛ ) #پانوشت(رنگ پس زمینه:#FFC0FF؛ واضح: هر دو؛ ارتفاع: 50 پیکسل؛ حاشیه بالا: -50 پیکسل؛ عرض: 800 پیکسل؛ حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛ ) #rasporka ( ارتفاع: 50 پیکسل؛ )

خوب، شکل نهایی Index.html درست در بالا داده شد. همین است، این سری از مقالات اختصاص داده شده به بلوک چیدمان های 2 و 3 ستونی ثابت و سیال وب سایت را می توان کامل در نظر گرفت.

همچنین می توانید ویدیوی "کار با برچسب div Html" را تماشا کنید:

موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم

با رفتن به اینجا می توانید ویدیوهای بیشتری را تماشا کنید

");">

ممکن است علاقه مند باشید

طرح بندی بلوک - ما طرح های دو ستونی، سه ستونی و سیال را برای سایت ایجاد می کنیم.
طرح‌بندی DiV - بلوک‌هایی را برای طرح‌بندی دو ستونی در HTML ایجاد کنید، اندازه‌های آنها را تعیین کنید و موقعیت‌یابی را در CSS تنظیم کنید.

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

اگر با کمک جداول این مشکل فقط با تعیین ارتفاع جدول و/یا سلول تودرتو در آن حل شود، هنگام استفاده از CSS در طرح بلوک، از رویکرد کاملاً متفاوتی استفاده می شود.

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

کد HTML تمام متدهای ارائه شده دارای ساختار زیر است (تنها تفاوت در کد CSS است):

کد CSS زیر فقط شامل آن دسته از ویژگی هایی است که حداقل برای پیاده سازی روش مربوطه ضروری هستند. برای هر یک از آنها می توانید یک مثال زنده ببینید.

راه اول

پاورقی با قرار دادن کاملاً آن و کشش ارتفاع بلوک‌های اصلی (html، بدنه و .wrapper) تا 100 درصد به سمت پایین فشرده می‌شود. در این حالت، content block.content باید حاشیه پایینی را مشخص کند که مساوی یا بزرگتر از ارتفاع فوتر باشد، در غیر این صورت پاورقی بخشی از محتوا را پوشش می دهد.

* ( حاشیه: 0؛ بالشتک: 0؛ ) html، بدنه (ارتفاع: 100%؛ ) .wrapper ( موقعیت: نسبی؛ حداقل ارتفاع: 100٪؛ ) .content ( padding-bottom: 90px; ) .footer ( موقعیت : مطلق؛ سمت چپ: 0؛ پایین: 0؛ عرض: 100%؛ ارتفاع: 80 پیکسل؛ )

راه دوم

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

* (حاشیه: 0؛ بالشتک: 0؛ ) html، بدنه، .wrapper (ارتفاع: 100٪؛ ) .content (اندازه جعبه: حاشیه-جعبه؛ حداقل ارتفاع: 100٪؛ بالشتک-پایین: 90 پیکسل؛ ) . پاورقی (ارتفاع: 80 پیکسل؛ حاشیه بالا: -80 پیکسل؛ )

با تشکر از ویژگی box-sizing: border-box، از ارتفاع بالای 100٪ جعبه با class .content جلوگیری می کنیم. یعنی در این مورد min-height: 100% + padding-bottom: 90px برابر است با 100% ارتفاع پنجره مرورگر.

راه سوم

خوبه چون بر خلاف روش های دیگه (به جز 5) ارتفاع فوتر مهم نیست.

* ( حاشیه: 0؛ بالشتک: 0؛ ) html، بدنه (ارتفاع: 100%؛ ) .wrapper (نمایش: جدول؛ ارتفاع: 100%؛ ) .content (نمایش: ردیف جدول؛ ارتفاع: 100%؛ )

در اینجا ما رفتار یک جدول را با تبدیل بلوک .wrapper به جدول و بلوک محتوای .به یک ردیف جدول تقلید می کنیم (به ترتیب نمایش: جدول و نمایش: ویژگی های جدول ردیف). با تشکر از این، و این واقعیت که بلوک محتوای . و تمام کانتینرهای اصلی آن روی 100٪ ارتفاع تنظیم شده اند، محتوا به ارتفاع کامل خود کشیده می شود، منهای ارتفاع پاورقی که به طور خودکار تعیین می شود - شبیه سازی جدول از گسترش فوتر جلوگیری می کند. فراتر از ارتفاع پنجره مرورگر

در نتیجه، فوتر به پایین فشار داده می شود.

روش چهارم

این روش بر خلاف روش های قبلی است و ویژگی خاص آن استفاده از تابع CSS calc() و واحد اندازه گیری vh است که فقط توسط مرورگرهای مدرن پشتیبانی می شود. در اینجا باید ارتفاع دقیق زیرزمین را بدانید.

* (حاشیه: 0؛ بالشتک: 0؛ ) .content ( حداقل ارتفاع: calc (100vh - 80px)؛ )

100vh ارتفاع پنجره مرورگر و 80px ارتفاع فوتر است. و با استفاده از تابع calc() مقدار دوم را از مقدار اول کم می کنیم و در نتیجه فوتر را به پایین فشار می دهیم.