Најчесто поставувано прашање во дизајнот на веб-страниците е "како ја поставувате висината на елементот до 100%"?
Ова може да изгледа како лесен одговор. Вие едноставно го користите CSS за да ја поставите висината на елементот на 100%, но тоа не секогаш се протега на тој елемент за да одговара на целиот прозорец на прелистувачот. Ајде да дознаеме зошто ова се случува и што можете да направите за да го постигнете овој визуелен стил.
Пиксели и проценти
Кога ќе ја дефинирате висината на елементот со користење на својството CSS и вредност која користи пиксели, тој елемент ќе зазема многу вертикален простор во прелистувачот.
На пример, став со висина: 100px; ќе потрае до 100 пиксели вертикален простор во вашиот дизајн. Не е важно колку е поголем вашиот прозорец на прелистувачот, овој елемент ќе биде 100 пиксели во висина.
Процентите работат поинаку од пиксели. Според спецификацијата на W3C, висината на процентот се пресметува во однос на висината на контејнерот. Значи, ако ставите став со висина: 50%; во делот со висина од 100 пиксели, ставот ќе биде 50 пиксели во висина, што е 50% од родителскиот елемент.
Зошто процентните височини не успеваат
Ако дизајнирате веб-страница и имате колона за која би сакале да ја преземете целосната висина на прозорецот, природниот наклон е да додадете висина: 100%; на тој елемент. Впрочем, ако ја поставите ширината на ширина: 100%; елементот ќе го заземе целосниот хоризонтален простор на страницата, па висината треба да работи на истата, нели? За жал, воопшто не е случај.
За да разберете зошто тоа се случи, мора да разберете како прелистувачите интерпретираат висина и ширина. Веб прелистувачите ја пресметуваат вкупната широчина достапна како функција за тоа колку е отворен прозорецот на прелистувачот. Ако не поставите вредности на ширина на вашите документи, прелистувачот автоматски ќе ја проследи содржината за да ја пополни целата ширина на прозорецот (стандардно е 100% ширина).
Висината вредност се пресметува поинаку од ширината. Всушност, прелистувачите воопшто не ја оценуваат висината, освен ако содржината не е толку долга што излегува надвор од визирот (на тој начин се потребни ленти за лизгање) или ако веб дизајнерот постави апсолутна висина за елемент на страницата. Инаку, прелистувачот едноставно овозможува проток на содржина во ширината на прозорецот за гледање додека не дојде до крај. Висината не е всушност пресметана воопшто.
Проблемите се јавуваат кога поставувате проценти висина на елементот кој има родителски елементи без поставување височини - со други зборови, родителските елементи имаат стандардна висина: авто; . Вие, всушност, барате од прелистувачот да пресмета висина од недефинирана вредност. Бидејќи тоа ќе биде еднаква на нула вредност, резултатот е дека прелистувачот не прави ништо.
Ако сакате да поставите висина на вашите веб-страници со процент, треба да ја поставите висината на секој родителски елемент од оној кој сакате да ја дефинирате висината. Со други зборови, ако имате ваква страница:
Содржина тука
Вие најверојатно сакате div и ставот во неа да имаат 100% висина, но тој div всушност има два родителски елементи:
и. За да ја дефинирате висината на div на релативна висина, мора да ја поставите висината на телото и html елементите.
Значи, ќе треба да го користите CSS за да ја поставите висината на не само div, туку и телото и html елементите. Ова може да биде предизвик, бидејќи можете брзо да се преоптоварите со се што е поставено на 100% висина, само за да го постигнете саканиот ефект.
Некои работи да се забележи кога работите со 100% височини
Сега кога знаете како да ја поставите висината на елементите на вашата страница на 100%, може да биде возбудливо да излезете и да го направите тоа на сите ваши страници, но има неколку работи што треба да ги знаете:
- Маргините и дополнувањето можат да додадат лента за лизгање каде што не сакате. Една од најтешките работи што ги најдов при работа со проценти височини (и ширини) е тоа што тогаш баластите и маргините на истите елементи можат да додадат ленти за лизгање на страницата, иако целата содржина прикажува без потреба од лизгање ленти. Ова е затоа што висината или ширината на елементот е првото нешто што се пресметува. Потоа се додаваат маргините и педалите. Значи, ако имате елемент со висина од 100%, а врвот и долниот раб од по 10 пиксели, ќе има лента за лизгање за дополнителни 20 пиксели. Запомнете, моделот на кутијата CSS додава маргината, границата и паѓањето на големината на елементот, така што 100% со која било од тие вредности на други кутии ќе всушност повеќе од 100%.
- Ако вашата содржина зазема повеќе од дефинираната висина, таа ќе презапише ништо по неа. Со други зборови, ако имате дизајн со столб кој е висина од 80%, а содржината што е внатре во неа ќе потрае до 100% од висината, тој дополнителен 20% ќе продолжи под колоната и ќе го наруши визуелниот дизајн од вашата страница. Ако има содржина под таа колона, текстот едноставно ќе пишува над врвот на неа. Често го гледам тоа кога веб дизајнер се обидува да ја принуди висината на страницата и го прави совршено да работи за лансирање, но кога содржината на таа страница се менува во иднина, нивните апсолутни висини целосно го разбиваат протокот на страницата. Ова е двојно точно кога градите реалистични веб-страници чија ширина и висина мора да се променат со големината на визирот.
За да го надминете ова, можете да ја поставите и висината на елементот. Ако го поставите на автоматски, ќе се појават ленти за скролување ако се потребни, но исчезнуваат кога не се. Тоа го поправа визуелниот прекин, но додава листи за лизгање каде што не ги сакате.
Користење на единици за преглед
Друг начин на кој можете да се справите со овој предизвик е да експериментирате со единиците за преглед на CSS. Со користење на единица за мерење висина на висина , можете да ги измените елементите за да ја преземете дефинираната висина на визирот, а тоа ќе се промени при промена на приказот! Ова е одличен начин да ги добиете визуелните визуелни елементи од 100% висина на страница, но сепак треба да бидат флексибилни за различни уреди и големината на екранот.