Најчешће постављено питање у дизајну веб сајта је "како поставити висину елемента на 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% висину визуелних слика на страници, али ипак имајте флексибилност за различите уређаје и величине екрана.