Како поставити висину ХТМЛ елемента на 100%

Најчешће постављено питање у дизајну веб сајта је "како поставити висину елемента на 100%"?

Ово може изгледати као лак одговор. Једноставно користите ЦСС да бисте поставили висину елемента на 100%, али то увек не истиче елемент како би се уклонио у цијели прозор прозора. Хајде да сазнамо зашто се ово догађа и шта можете учинити како бисте остварили овај визуелни стил.

Пиксели и проценти

Када дефинишете висину елемента помоћу својства ЦСС-а и вредности која користи пикселе, тај елемент ће заузети толико вертикални простор у прегледачу. На пример, параграф са

висина: 100пк;

ће покренути 100 пиксела вертикалног простора у вашем дизајну. Није битно колико је већи прозор прегледача, овај елемент ће бити 100 пиксела у висини.

Проценти функционишу другачије од пиксела. Према В3Ц спецификацији, процентуалне висине се израчунавају у односу на висину контејнера. Дакле, ако ставите параграф са

висина: 50%;
унутар дива са висином од 100пк, пасус ће бити висине 50 пиксела, што је 50% његовог родитељског елемента.

Због чега се процентуалне висине не успијевају

Ако дизајнирате веб страницу и имате колону за коју желите да преузмете пуну висину прозора, природни нагиб је додати

висина: 100%;
на тај елемент. На крају крајева, ако сте поставили

ширина
до

ширина: 100%;
елемент ће заузети пун хоризонтални простор странице, тако да

висина
треба да раде исто, зар не? Нажалост, то уопште није случај.

Да бисте разумели зашто се ово деси, морате схватити како претраживачи тумаче висину и ширину. Веб претраживачи израчунавају укупну ширину доступне у функцији колико је отворен прозор прегледача.

ширина
Уколико не постављате ниједне вриједности на вашу документацију, претраживач ће аутоматски пролазити садржај како би попунио читаву ширину прозора (стандардна је ширина од 100%).

Висина висине се израчунава различито од ширине. У ствари, претраживачи уопште не процењују висину, осим ако је садржај толико дугачак да излази изван погледа (тако да захтијева траке за помицање) или ако веб дизајнер поставља апсолутну вриједност за елемент на страници.

висина
У супротном, претраживач једноставно дозвољава проток садржаја унутар ширине приказа док не дође до краја. Висина се уопште не израчунава.

Проблеми се јављају када поставите процентуалну висину на елементу који има родитељске елементе без постављања висине - другим речима, матични елементи имају подразумевано.

висина: ауто;
Ви заправо тражите од претраживача да израчуна висину из недефинисане вредности. Пошто би то било једнако нула вредност, резултат је у томе што претраживач не ради ништа.

Ако желите да поставите висину на вашим веб страницама у проценту, морате подесити висину сваки родитељски елемент оног који желите дефинисати висином. Другим речима, ако имате овакву страницу:

Садржај овде
Вероватно желите

див
и параграф у њему да има 100% висину, али тај див заправо има два елементи родитеља:

и. Да би се дефинисала висина

див
на релативну висину, морате подесити висину

тело
и

хтмл
елементе. Дакле, треба да користите ЦСС да бисте поставили висину не само див-а, већ и тела и ХТМЛ-елемената. Ово може бити изазов, пошто се брзо претјерате да је све постављено на 100% висину, само да бисте постигли жељени ефекат.

Неке ствари које треба запазити када радите са 100% висинама

Сада када знате како поставити висину елемената странице на 100%, може бити узбудљиво да изађете и то учините свим вашим страницама, али има неколико ствари које требате бити свјесне:

Маргине и паддинг могу додати траку за помицање у којој не желите.Једна од најнеугоднијих ствари које сам пронашао у раду са процентним висинама (и ширинама) је то што онда паддинг и маргине на истим елементима могу додати траке за помицање на страницу, иако се сви садржаји приказују без потребе за скролним тракама. То је зато што је висина или ширина елемента прва ствар која се израчунава. Затим се додају маргине и падџи. Дакле, ако имате елемент са висином од 100%, а горња и доња маргина од по 10 пиксела, постаће се трака за померање за додатних 20 пиксела. Запамтите, модел ЦСС бок-а додаје маргину, границу и паддинг на величину елемента, тако да ће 100% са било којом од тих вриједности модела бок-а бити заправо више од 100%.

Ако ваш садржај заузима више од дефинисане висине, он ће преписати било шта после ње.Другим речима, ако имате дизајн са колоном која је висока 80%, а садржај који је унутар њега заузима 100% висине, додатних 20% ће се наставити испод колоне и прекинути визуелни дизајн ваше странице. Ако постоји садржај испод те колоне, текст ће једноставно написати изнад њега. Ја често видим да се то дешава када веб дизајнер покуша да приморава висину странице и савршено ради на лансирању, али када се садржај на тој страници промени у будућности, њихове апсолутне висине потпуно прекидају ток странице. Ово је двоструко тачно када градите одговарајуће веб странице чија ширина и висина се морају мијењати с величином погледа.

Да бисте то поправили, можете подесити и висину елемента. Ако сте га подесили

ауто,
скролни плочи ће се појавити ако су потребни, али нестају када нису.То исправља визуелни прекид, али додаје скроловима где их можда не желите.

Коришћење Виевпорт јединица

Други начин на који можете ријешити овај изазов је експериментисање са ЦСС Виевпорт јединицама. Коришћењем мерне јединице висине погледа, елементе величине можете да преузмете на одређену висину приказа, а то ће се променити када се промени поглед! Ово је одличан начин да добијете 100% висину визуелних слика на страници, али ипак имајте флексибилност за различите уређаје и величине екрана.