Qanday qilib sahifaning altbilgisi qismini ("altbilgi") oynaning pastki chegarasiga yopishtirib qo'yish kerak - bu, ehtimol sayt sahifalarini joylashtirishdagi eng keng tarqalgan muammo. Albatta, echimlar bor va ularning bir nechtasi bor. Quyida tarkib va brauzer turidan qat'i nazar, altbilgi har doim sahifaning pastki qismiga bosilganligiga ishonch hosil qilishning bir usuli keltirilgan.
Bu zarur
CSS va HTML bo'yicha asosiy bilimlar
Ko'rsatmalar
1-qadam
Masalan, odatdagi paginatsiya sxemalaridan birini misol tariqasida ko'rib chiqamiz - u chodirda (boshcha), asosiy blokda va altbilgida bo'ladi. Albatta, agar kerak bo'lsa, siz asosiy blokga bir nechta ustunlarni qo'yishingiz mumkin, ammo biz buni bu erda qilmaymiz, faqat taglavhani joylashtirmaslikka e'tibor qaratamiz. Shifaning HTML-kodi spetsifikatsiyani e'lon qilish bilan boshlanadi:
Teglar orasida va sahifa sarlavhasidan tashqari biz kodlash ko'rsatkichini joylashtiramiz: Shuningdek, uslublar tavsifini o'z ichiga olgan tashqi CSS-faylga havola: @import "styles.css"; Biz ularni joylashtirmaymiz To'qqizinchi versiyadagi Opera brauzerida asoratlar paydo bo'lishiga yo'l qo'ymaslik uchun to'g'ridan-to'g'ri sahifaning HTML-kodidagi uslublarning tavsifi. Teglar orasida va sahifaning blok tuzilishini joylashtiring. Birinchisi, albatta, sarlavha bloki. Ushbu maxsus blok uchun uslublarni o'rnatish uchun biz unga sarlavha identifikatorini beramiz:
Ushbu sarlavha har doim oynaning yuqori qismida joylashgan.
Keyin - sahifaning asosiy bloki. U ikkita joylashtirilgan - tashqi (identifikator - tashqi) va ichki (identifikator - tashqi o'rash) dan iborat bo'ladi:
Bu asosiy qism.
Va nihoyat, altbilgi:
Bu altbilgi - har doim derazaning pastki qismida!
To'liq sahifa quyidagicha ko'rinadi:
Qanday qilib altbilgini bosish kerak
@import "styles.css";
Ushbu sarlavha har doim oynaning yuqori qismida joylashgan.
Bu asosiy qism.
Bu altbilgi - har doim derazaning pastki qismida!
2-qadam
Endi uslublar varag'i tarkibiga o'tamiz. U quyidagi sxemani amalga oshiradi: asosiy sahifa bloki 100% balandlikka o'rnatiladi, sarlavha mutlaqo joylashtiriladi va altbilgi nisbatan bo'ladi. Sarlavha sahifaning asosiy tarkibini bir-biriga qo'shib qo'ymaslik uchun ushbu asosiy tarkib asosiy qutidagi qo'shimcha maydonchaga joylashtiriladi va ushbu qo'shimcha quti sarlavha maydonining balandligiga teng bo'lgan yuqori chegaraga o'rnatiladi. Va pastki qismga uning balandligiga teng bo'lgan manfiy yuqori marja beriladi - shu tarzda u derazaning pastki chetidan to'liq balandlikka ko'tariladi. CSS faylining to'liq tarkibi: * {margin: 0; to'ldirish: 0}
HTML, tanasi {balandligi: 100%;} tanasi {
rang: qora;
pozitsiya: nisbiy;
}
#outer {
minimal balandlik: 100%;
margin: 0;
fon: oq;
rang: qora;
} * html #outer {balandligi: 100%;}
#header {
pozitsiya: mutlaq;
yuqori: 0;
chapda: 0;
kengligi: 100%;
balandligi: 70 piksel;
fon: # 304a00;
toshib ketish: yashirin;
rang: oq;
matn bilan tekislash: markaz;
} #footer {
pozitsiya: nisbiy;
margin-top: -50px;
aniq: ikkalasi ham;
kengligi: 100%;
balandligi: 50px;
orqa rang: # 304a00;
rang: oq;
matn bilan tekislash: markaz;
}
.outerwrap {
suzuvchi: chap;
kengligi: 100%;
padding-top: 71px;
} Ushbu fayl sahifaning HTML-kodida biz ko'rsatgan ism bilan saqlanishi kerak - styles.css.
