"پاورقی" معمولاً پایین ترین قسمت از طرح صفحه وب است. رایج ترین مشکل در موقعیت یابی این پاورقی این است که بدون توجه به پر بودن صفحه یا نوع مرورگر ، همیشه در پایین پنجره قرار گیرد. از زمان انتقال گسترده به طرح بلوک ، کاملاً چند راه حل برای این مشکل وجود داشته است که یکی از آنها در زیر آورده شده است.
لازم است
دانش پایه CSS و HTML
دستورالعمل ها
مرحله 1
بیایید رایج ترین طرح چیدمان صفحه را مبنا قرار دهیم - سه بلوک که یکی بالاتر از دیگری قرار گرفته است. قسمت بالایی (هدر) باید همیشه با مرز بالای پنجره ، پایین (پایین صفحه) - به مرز پایین تراز شود ، و اصلی (بدنه) همیشه باید تمام فضای بین آنها را پر کند. کد منبع باید حاوی پیوندی به مشخصات XHTML 1.0 Transitional باشد ، و شرح سبکها باید در یک پرونده CSS خارجی قرار گیرد (برای جلوگیری از مشکلی با Opera 9. XX). شرح HTML ساختار باید در قسمت اصلی قرار گیرد بدنه صفحه. این البته از بلوک بالا آغاز می شود ، در برچسب آن باید یک ویژگی شناسایی با یک مقدار قرار گیرد ، به عنوان مثال divHead:
بلوک سربرگ
بلوک اصلی باید از یک جفت بلوک تو در تو تشکیل شود. به شناسه خارجی شناسه divOut داده می شود و درونی - divContent:
محتوای اصلی.
پاورقی روی divFoot تنظیم شده است:
صفحه صفحه.
گام 2
کد کامل HTML صفحه باید به این شکل باشد:
سه بلوک
import "style.css"؛
این یک بلوک هدر است.
محتوای اصلی.
این پایین صفحه است.
مرحله 3
توضیحات سبک سازوکار زیر را پیاده سازی می کند: بلوک میانی (divOut) روی 100٪ ارتفاع تنظیم می شود ، بلوک بالایی (divHead) موقعیت مطلق دارد و پایین پایین نسبی. در بلوک محتوای اصلی (divContent) ، باید فضای بالایی برابر با ارتفاع بلوک عنوان وجود داشته باشد تا با محتوای اصلی صفحه همپوشانی نداشته باشد. و بلوک پایین (پاورقی) باید در بالا ، برابر با ارتفاع این بلوک ، حاشیه منفی داشته باشد. با این کار آن را بالاتر از مرز پایین پنجره مرورگر قرار می دهید. این سازوکار را می توان با استفاده از یک فایل css با محتوای زیر پیاده سازی کرد: * {margin: 0؛ بالشتک: 0}
html ، body {قد: 100٪؛} بدن {
موقعیت: نسبی؛
رنگ: # 000؛
}
#divOut {
حاشیه: 0؛
حداقل قد: 100٪
زمینه: #FFF؛
رنگ: # 000؛
}
* html #divOut {ارتفاع: 100٪؛}
#divHead {
موقعیت: مطلق؛
سمت چپ: 0؛
بالا: 0؛
عرض: 100٪
ارتفاع: 80 پیکسل؛
پس زمینه: # 2F5000؛
سرریز: پنهان
text-align: مرکز؛
رنگ: #FFF؛
} #divFoot {
موقعیت: نسبی؛
روشن: هر دو؛
margin-top: -60px؛
ارتفاع: 60 پیکسل
عرض: 100٪
background-color: # 2F5000؛
text-align: مرکز؛
رنگ: #FFF؛
}
.divContent {
عرض: 100٪
شناور به سمت چپ؛
padding-top: 81px؛
} نامی که برای صفحه سبک در کد HTML تعیین کرده اید ، style.css است.
