Veb-sayt dizaynida tez-tez so'raladigan savol: "Elementning balandligini 100% ga qanday qilib o'rnatasiz?"
Bu oson javob kabi ko'rinishi mumkin. Siz oddiygina elementdan balandlikni 100% ga sozlash uchun CSS- dan foydalanasiz, lekin bu elementni hamma brauzer oynasiga moslash uchun har doim uzatmaydi. Keling, bu nima sodir bo'lishini va ushbu ingl. Uslubga erishish uchun nima qilishingiz mumkinligini bilib olaylik.
Piksel va foizlar
CSS funktsiyasidan va piksellardan foydalanadigan qiymatdan foydalanib, elementning balandligini belgilaganda, u element brauzerda juda ko'p vertikal maydonni oladi.
Masalan, balandligi bo'lgan xat: 100px; sizning dizayningizdagi 100 piksel vertikal maydonni oladi. Sizning brauzer oynangiz qanchalik katta bo'lsa, bu element 100 piksel balandlikda bo'ladi.
Foizlar piksellardan farqli o'laroq ishlaydi. W3C spesifikatsiyasiga muvofiq, foiz balandliklari konteynerning balandligi bo'yicha hisoblanadi. Shunday qilib, balandlik bilan paragrafni qo'ysangiz: 50%; 100px balandlikdagi div ichida paragraf 50 piksel balandlikda bo'ladi, bu esa 50% ni tashkil etadi.
Nima uchun foizlar balandliklari yo'q
Agar siz veb-sahifani yaratmoqchi bo'lsangiz va siz derazaning to'liq balandligini olishni istagan ustuningiz bo'lsa, tabiiy moyillik balandlikni qo'shish kerak: 100%; Bu elementga. Nihoyat, kengligi kenglik bilan belgilasangiz: 100%; element elementning to'liq gorizontal bo'shlig'ini oladi, shuning uchun balandlik bir xil, to'g'ri ishlaydi? Afsuski, bu hol yuzaga kelmaydi.
Buning sababini tushunish uchun brauzerlarning balandligi va kengligini qanday tushunishini tushunishingiz kerak. Veb-brauzerlar mavjud kenglikni brauzer oynasining qanchalik kengligining vazifasi sifatida hisoblashadi. Hujjatlaringizdagi kenglik qiymatlarini belgilamasangiz, brauzer avtomatik ravishda derazaning butun kengligini to'ldirish uchun tarkibni oqimlaydi (100% kengligi standart).
Juda katta qiymati kenglikdan farq qiladi. Darhaqiqat, brauzerlar kontent uzoq ko'rinishda (ya'ni aylantirish majmualarini talab qiladigan) tashqariga chiqmasa yoki veb-uslubchisi sahifadagi element uchun mutlaq balandlikni o'rnatmasa, umuman balandlikni baholaydilar. Aks holda, brauzer faqat kontentni oqim oxirigacha kelguniga qadar ko'rish portining kengligida joylashtiradi. Balandligi umuman hisoblanmaydi.
Heights majmui o'rnatilgan yuqori elementlarga ega bo'lgan elementdagi foiz balandligini belgilaganingizda muammo paydo bo'ladi - boshqa aytganda, yuqori elementlarning standart balandligi: avtomatik; . Aslida brauzerdan aniqlanmagan qiymatdan balandlikni hisoblashni so'rayapsiz. Bu null qiymatga teng bo'lishi uchun, natijada brauzer hech narsa qilmaydi.
Veb-sahifalaringizda balandlikni foizga belgilash zarur bo'lsa, siz belgilangan balandlikdagi har bir ota-ona elementining balandligini belgilashingiz kerak. Boshqa so'zlar bilan aytganda, agar shunday sahifa mavjud bo'lsa:
Kontent bu erda
Balki siz div va xatning 100% balandlikdagi bo'lishini xohlaysiz, lekin bu div aslida ikkita asosiy elementga ega:
va. Divning balandligini nisbatan balandlikda aniqlash uchun siz tananing va html elementlarining balandligini ham belgilashingiz kerak.
Shunday qilib, CSS-dan nafaqat divni emas, balki tanani va HTML elementlarini o'rnatish uchun foydalanish kerak. Bu sizni qiyinlashtirishi mumkin, chunki siz tezda bu kerakli effektga erishish uchun 100% balandlikda o'rnatiladigan hamma narsalar bilan tez-tez duch kelasiz.
100% balandliklar bilan ishlashda e'tiborga olinadigan ba'zi narsalar
Endi sahifa elementlaringizning balandligini 100% ga sozlashni bilib olsangiz, bu sizning sahifangizga chiqishi va buni amalga oshirish uchun hayajonli bo'lishi mumkin, ammo siz xabardor bo'lishingiz kerak bo'lgan bir nechta narsalar mavjud:
- Margins va to'ldirish siz istamagan joyga o'tish oynasini qo'shishi mumkin. Fayton balandliklari (va kengliklari) bilan ishlaydigan narsalarni topib qo'ygan eng noqulay bo'lgan narsalardan biri shundaki, barcha kontentlar aylantirish majmualariga kerak bo'lmasa ham, o'sha elementlarning ustidagi to'lg'azish va chekkaishlar sahifaga o'tish satrlari qo'shishlari mumkin. Buning sababi elementning balandligi yoki kengligi hisoblanadigan birinchi narsa. Keyinchalik chekka chiziqlar va to'ldirishlar qo'shiladi. Shunday qilib, siz 100% balandlikdagi har bir elementingiz va har biri 10 pikselli yuqori va pastki chetida chekkalari bo'lsa, qo'shimcha 20 piksel uchun aylantirish paneli bo'ladi. Unutmangki, CSS quti modeli chekka, chegara va to'ldirishni elementning kattaligiga qo'shadi, shuning uchun 100% boshqa qutilar modeli qiymatlari bilan 100% dan ko'proq bo'ladi.
- Agar kontentingiz belgilangan balandlikdan ko'proq bo'lsa, u bundan keyin biror narsani yozib qo'yadi. Boshqacha qilib aytadigan bo'lsak, balandlikning 80% bo'lgan ustunli dizayni va uning tarkibidagi balandlikning balandligi 100% ni tashkil qiladi, bu qo'shimcha 20% ustun ostida davom etadi va vizual dizaynni buzadi sahifangizning. Ushbu ustun ostidagi kontent bo'lsa, matn faqatgina uning ustki qismini yozadi. Men tez-tez bu veb-uslubchisi sahifaning balandligini majbur qilishga harakat qiladi va uni ishga tushirish uchun mukammal ishlaydi, lekin o'sha sahifadagi tarkib kelajakda o'zgarganda, ularning mutlaq balandliklari sahifa oqimini butunlay sindiradi. Bu kengligi va balandligi ko'rinish o'lchamlari bilan o'zgarishi kerak bo'lgan javob beradigan veb-saytlarni qurishda ikki baravar to'g'ri keladi.
Buni tuzatish uchun elementning balandligini ham belgilashingiz mumkin. Agar siz uni avtomatik ravishda rostlasangiz, kerak bo'lganda paneli paydo bo'ladi, ammo ular yo'q bo'lganda yo'qoladi. Bu ingl. Tanaffusni o'rnatadi, lekin siz ularni istamasligingiz kerak bo'lgan scrollbars qo'shimchalar.
Viewport birligidan foydalanish
Ushbu muammolarni hal qilishning yana bir yo'li - CSS Viewport bo'limlari bilan tajriba o'tkazishdir. O'lchov o'lchov birligi o'lchov birligidan foydalanib, viewportning aniqlangan balandligini olish uchun elementlarni o'lchashingiz mumkin va u ko'rinishdagi o'zgarishlarni o'zgartiradi! Ushbu sahifada 100% balandlikdagi ingl. Ko'rinishingizni olishning ajoyib usuli, ammo ular turli qurilmalar va ekran o'lchamlari uchun moslashuvchan bo'lishi kerak.