نحوه ایجاد قسمت پایین صفحه ("پاورقی") به حاشیه پایین پنجره - این احتمالاً رایج ترین مشکل در چیدمان صفحات سایت است. البته راه حل هایی وجود دارد و چندین راه حل نیز وجود دارد. در زیر یکی از راه های اطمینان از فشار دادن پاورقی همیشه به پایین صفحه وجود دارد ، صرف نظر از میزان محتوا و نوع مرورگر.
لازم است
دانش پایه CSS و HTML
دستورالعمل ها
مرحله 1
بیایید یکی از نمونه های معمول صفحه بندی را به عنوان مثال در نظر بگیریم - این یک اتاق زیر شیروانی (هدر) ، بلوک اصلی و پاورقی خواهد داشت. البته ، در صورت لزوم ، می توانید چندین ستون را در بلوک اصلی قرار دهید ، اما ما در اینجا این کار را نمی کنیم ، فقط بر روی قرار نگرفتن پاورقی تمرکز خواهیم کرد. کد HTML صفحه با اعلام مشخصات آغاز می شود:
بین برچسب ها و علاوه بر عنوان صفحه ، نشانه ای از رمزگذاری قرار خواهیم داد: و همچنین پیوندی به یک فایل CSS خارجی حاوی شرح سبک ها:import "styles.css" ؛ ما توصیف سبک ها مستقیماً در کد html صفحه وجود دارد تا از بروز مشکل در مرورگر Opera نسخه نهم جلوگیری کنید. بین برچسب ها و ساختار بلوک صفحه را قرار دهید. اولین ، البته ، عنوان عنوان است. ما به آن شناسه هدر می دهیم تا بتواند سبک هایی را برای این بلوک خاص تنظیم کند:
این سربرگ همیشه در بالای پنجره است.
سپس - بلوک اصلی صفحه. از دو تو در تو تشکیل می شود - بیرونی (شناسه - بیرونی) و داخلی (شناسه - پوشش بیرونی):
این قسمت اصلی است.
و در آخر ، پاورقی:
پایین صفحه است - همیشه در پایین پنجره!
صفحه کامل به صورت زیر خواهد بود:
چگونه پایین صفحه را فشار دهیم
import "styles.css" ؛
این سربرگ همیشه در بالای پنجره است.
این قسمت اصلی است.
پایین صفحه است - همیشه در پایین پنجره!
گام 2
حال بیایید به محتویات صفحه سبک برویم. این طرح زیر را اجرا می کند: بلوک صفحه اصلی روی 100٪ ارتفاع تنظیم می شود ، عنوان کاملاً قرار می گیرد و پاورقی نسبتاً مناسب خواهد بود. برای جلوگیری از همپوشانی عنوان با محتوای اصلی صفحه ، این محتوای اصلی در یک جعبه اضافی در جعبه اصلی قرار می گیرد و این جعبه اضافی در حاشیه بالایی برابر با ارتفاع جعبه عنوان قرار می گیرد. و به پاورقی یک حاشیه بالایی منفی برابر با ارتفاع آن داده می شود - به این ترتیب از بالای لبه پایین پنجره تا ارتفاع کامل آن بالا می رود. محتوای کامل پرونده css: * {margin: 0؛ بالشتک: 0}
html ، body {قد: 100٪؛} بدن {
رنگ سیاه؛
موقعیت: نسبی؛
}
# واتر {
حداقل قد: 100٪
حاشیه: 0؛
زمینه: سفید؛
رنگ سیاه؛
} * html #outer {height: 100٪؛}
#سرتیتر {
موقعیت: مطلق؛
بالا: 0؛
سمت چپ: 0؛
عرض: 100٪
ارتفاع: 70px؛
پس زمینه: # 304a00؛
سرریز: پنهان
رنگ سفید؛
text-align: مرکز؛
} # فوتور {
موقعیت: نسبی؛
margin-top: -50px؛
روشن: هر دو؛
عرض: 100٪
ارتفاع: 50 پیکسل
background-color: # 304a00؛
رنگ سفید؛
text-align: مرکز؛
}
.بسته بندی {
شناور به سمت چپ؛
عرض: 100٪
padding-top: 71px؛
} این فایل باید با نامی که ما در کد html صفحه مشخص کردیم ذخیره شود - styles.css.
