сайт дизайны бир жалпы суроо "кантип 100% элементтин бийиктигин" деген ким?
Бул жеңил жооп сыяктуу сезилиши мүмкүн. Сиз жөн гана колдоно CSS 100% элементтин бийиктигин, бирок бул дайыма эле толугу менен серепчи терезесин дал ошол элементин сунуп бербейт. бул болот, бул көрүнүш стили менен жетүү үчүн эмне кылса болот, эмне үчүн карап көрөлү.
Pixel'дер жана Percentages
Сиз колдонуп элементтин бийиктигин аныктап жатканда CSS мүлктү жана пикселди пайдаланышат маани, бул элемент браузерде көп тик орун алат.
Мисалы, бийиктиги бир абзац: 100px; браузер терезе канчалык көп мааниге ээ эмес, сенин design.It боюнча тигинен космосто 100 пикселди алып, бул элемент бийиктиги 100 пиксел болот.
Percentages пиксел караганда башкача иштешет. W3C тактоо боюнча пайыздык тоолор контейнерлердин бийиктиги боюнча эсептелет. Демек, бийиктиги бир бөлүгүн коюп, эгерде: 50%; 100px бийиктикте менен курс ичинде,-пункту анын 50% ы ата-элемент болуп саналат бийиктиги 50 пиксел, болот.
Пайыз Heights эмне үчүн бузулат?
Эгер кубануу менен иштеп жатса, жана сиз терезенин толук бийиктигин алып келет деген рамка бар, табигый каалоолорунун бийиктиги кошууга болот: 100%; Бул элемент. Анын үстүнө, сен туурасын туурасы коюлса, анда: 100%; элемент-беттеги, ошондуктан, бийиктиги бирдей, туура иштеши керек толук горизонталдуу орун алат? Тилекке каршы, бул баары андай эмес.
эмне үчүн бул окуя түшүнүш үчүн, сизге браузерлер узуну жана туурасы которуп кантип түшүнүү керек. Браузерлер серепчи терезеси ачылган ар кандай милдети деп жалпы жеткиликтүү туурасын эсептөө. Эгер документтер кандайдыр бир, туурасы баалуулуктарын коюлбай калса, серепчи жазуусу терезенин бүт туурасын толтуруу үчүн мазмунун агып чыгат (100% туурасы демейки болуп саналат).
Бийиктиги балл туурасы караганда башкача эсептелет. Чынында, браузерлер бардык мазмун, ал портуна (Ошентип, айлантма шыргыйларды талап) же анын чегинен тышкары болсо, интернет дизайнер-беттеги бир элементи үчүн абсолюттук бийиктиги коёт, ушунчалык узун болсо, анда бийик баа жок. Болбосо, браузер жөн эле ал акыркы күн келгенге чейин портуна туурасы ичинде мазмуну агымын берет. бийиктиги бүт эсептелген эмес.
Маселелери коюлганын бийик туруп, ата-эне элементтер бар элементке боюнча пайыздык бийиктигин качан пайда - башкача айтканда, ата-эне элементтер демейки бийиктиги бар: унаам; . Силер, мындайча айтканда, бир белгисиз наркынан бийиктиги эсептөө үчүн браузерди суранабыз. бир нөл-баасын барабар болгондуктан, натыйжасы серепчи эч нерсе кылган эмес.
Эгер пайыздык сиздин интернет беттеринде бийик коюп келсе, сиз бийиктиги аныкталган каалаган адамдын ар бир ата-эне элементи бийиктигин керек. Башка сөз менен айтканда, бул сыяктуу барак бар болсо, анда:
бул жерде мазмун
Балким, бөлүү жана 100% бийиктигин үчүн ал пункт каалашат, бирок, ал DIV эки ата-эне элементтер бар:
менен. салыштырмалуу бийиктикке курс бийиктигин аныктоо үчүн, ошондой эле мамлекеттик орган жана HTML элементтери бийиктигин керек.
Ошентип, CSS гана курс эмес, бийиктиги, ошондой эле дене менен HTML элементтерин колдонуу керек. Бул тез эле бул таасир эткидей жетүү үчүн, 100% бийиктикке бошонгонго баары батып ала алабыз, анткени кыйынга турушу мүмкүн.
Кээ бир нерселер 100% Тоо менен бирге иш алып кетүү
Эми сиз бет элементтердин бийиктиги 100% коюуга кантип билебиз, ал барып, бардык беттердеги деп жатышат, бирок сиз жөнүндө билиши керек болгон бир канча жагдай бар үчүн кызыктуу болушу мүмкүн:
- Чектер жана толтургучтар бири келген эмес, тескерисинче, бир түрмөк тилкесин кошо аласыз. Мен пайыздык бийик (жана кандай көлөмдөгү) менен иштеген таптым абдан тажатма нерселердин бири, андан кийин ошол эле элементтер боюнча билмейинче жана четтери да айлантма шыргыйларды муктаж болбостон бардык мазмун көрсөтүп да, бетине жылдыруу куймаларды кошо алабыз. Бул элементтин бийиктиги же туурасы эсептелинет биринчи себеби болуп саналат. Ошондо маржа жана paddings боюнча кошулат. 10 пиксел ар бири 100%, ошондой эле жогорку жана төмөнкү кошуунун бийиктиги менен элемент бар болсо, кошумча 20 пиксел үчүн жылдыруу тилкеси болот. Эске, CSS бокс үлгүсү маржа, чек ара, элементтин өлчөмү көздөй жана толтургучтар, ошондуктан башка бокс үлгүсү баалуулуктарды эч менен 100% иш жүзүндө 100дөн ашык% болот деп кошумчалайт.
- Мазмун дагы аныкталган бийиктиги ашык болсо, анда ал андан кийин эч нерсе жокко чыгарат. Башкача айтканда, бийиктиги 80% бир колонна менен жасалган болсо, ал эми бийиктиги 100% алып турган ички мазмуну, бул кошумча 20% колонна төмөн улантуу жана көрүнүш жасалгасы сындырам + сенин бетине. Ошол тилкеде төмөнкү мазмун бар болсо, анда тексттик жөн эле анын үстүнөн жазып берем. Мен көп учурда бул желе дизайнер барактын бийиктигин мажбурлоо үчүн аракет кылат жана аны ишке киргизүү үчүн кемчиликсиз иштеген түштө көргөн, бирок келечекте барак өзгөртүүлөр боюнча мазмун, алардын абсолюттук бийик толугу бетине агымын кыйраткандан кийин. Бул жооп сайттарды куруп жатканда эки эсе чындык, анын туурасы, бийиктиги портуна өлчөмү менен өзгөрүшү керек.
Бул маселени чечүү үчүн, сиз элементтин бийиктиги, ошондой эле коюуга болот. Сиз машины кылып орнотуп, алар жок болгондо жылдыруу барлар, алар керек болсо, пайда, ал эми жок болот. Бул көргөзмө тыныгуу бекитет, бирок сен аларды болгусу келбеши мүмкүн жылдырууну кошумчалайт.
Колдонуу Көрүнүш бөлүмдөрүн
Эгер бул маселени чечүү боюнча дагы бир жолу CSS Көрүнүш Бирдиктердин эл менен тажрыйба керек. Өлчөө терезеси бийиктиги бирдигин пайдалануу менен, сиз портуна аныкталган бийиктигин алып көлөмү элементтерди алат, жана терезеси өзгөрүшүнө жараша өзгөрүп турат! Бул беттеги боюнча 100% бийиктиги көрүнөө алуу үчүн бир жолу, бирок дагы эле аларды ар кандай приборлордун жана экран өлчөмдөрүн үчүн ийкемдүү болушу керек.