Algeng spurning í vefhönnun er "hvernig stillir þú hæð þáttarins í 100%"?
Þetta kann að virðast eins og auðvelt svar. Þú notar einfaldlega CSS til að stilla hæð frumefnisins í 100%, en þetta streymir ekki alltaf þann þátt að passa alla vafrann. Við skulum finna út hvers vegna þetta gerist og hvað þú getur gert til að ná þessum sjónrænum stílum.
Pixlar og hlutföll
Þegar þú skilgreinir hæð frumefni með því að nota CSS eignina og gildi sem notar pixla, þá mun þessi þáttur taka upp svo mikið lóðrétt pláss í vafranum.
Til dæmis málsgrein með hæð: 100px; mun taka upp 100 punkta af lóðréttu rými í hönnun þinni. Það skiptir ekki máli hversu stærri vafrinn þinn er, þetta þáttur verður 100 pixlar á hæð.
Hlutfall virkar öðruvísi en pixlar. Samkvæmt W3C forskriftinni eru hundraðshlutar reiknuð með hliðsjón af hæð gámsins. Svo ef þú setur málsgrein með hæð: 50%; inni í div með hæð 100px, málsgreinin verður 50 punktar á hæð, sem er 50% af foreldrahlutanum.
Hvers vegna Hlutfall Heights mistakast
Ef þú ert að hanna vefsíðu og þú ert með dálk sem þú vilt taka upp alla hæð gluggans, þá er náttúrulega halla að bæta við hæð: 100%; að þeim þáttum. Eftir allt saman, ef þú stillir breiddina að breidd: 100%; Einingin mun taka upp allt lárétt pláss á síðunni, þannig að hæðin ætti að vera það sama, ekki satt? Því miður er þetta alls ekki.
Til að skilja hvers vegna þetta gerist verður þú að skilja hvernig vafrar túlka hæð og breidd. Vefskoðarar reikna út heildarfjölda tiltækrar breiddar sem fall af því hversu breiður vafrinn er opnaður. Ef þú setur ekki breiddargildi á skjölin, flýgur vafrinn sjálfkrafa innihaldinu til að fylla alla breidd gluggans (100% breidd er sjálfgefið).
Hæð gildi er reiknað öðruvísi en breidd. Í raun mæla vafrar ekki hæð yfirleitt nema innihaldið sé svo lengi að það fer utan sjónarhólfsins (þarfnast skrunbarna) eða ef vefhönnuður setur alger hæð fyrir frumefni á síðunni. Annars leyfir vafrinn einfaldlega innihaldsefnið innan breiddar sýnportalsins þar til það kemur til enda. Hæðin er ekki reiknuð í raun.
Vandamál eiga sér stað þegar þú setur hundraðshluta hæð á frumefni sem hefur foreldraþætti án hæða stillt - með öðrum orðum, foreldraþáttarnir eru með sjálfgefin hæð: sjálfvirkt; . Þú ert í raun að biðja vafrann um að reikna út hæð frá óákveðnu gildi. Þar sem það myndi vera ógildið, þá er niðurstaðan sú að vafrinn gerir ekkert.
Ef þú vilt setja hæð á vefsíðum þínum í prósentu þarftu að stilla hæð hvers foreldraþáttar sem þú vilt skilgreina hæðina. Með öðrum orðum, ef þú ert með síðu svona:
Innihald hér
Þú vilt líklega div og málsgrein í því að hafa 100% hæð, en þessi div hefur í raun tvö foreldraþætti:
og. Til að skilgreina hæð divarinnar í hlutfallslega hæð, verður þú að stilla hæð líkamans og html þættanna eins og heilbrigður.
Svo þú myndir þurfa að nota CSS til að stilla hæð ekki aðeins div, heldur einnig líkamann og html þætti. Þetta getur verið erfitt, þar sem þú getur fljótt orðið óvart með því að allt sé stillt á 100% hæð, aðeins til þess að ná tilætluðum árangri.
Nokkur atriði sem þarf að hafa í huga þegar unnið er með 100% hæðum
Nú þegar þú veist hvernig þú setur hæð hliðarþáttanna í 100% getur það verið spennandi að fara út og gera það á öllum síðum þínum, en það eru nokkur atriði sem þú ættir að vera meðvitaðir um:
- Mörgæs og púði getur bætt við skruntal þar sem þú vilt ekki einn. Eitt af því pirrandi hlutum sem ég hef fundið með því að vinna með hundraðshlutum (og breidd) er að þá getur padding og marmar á sömu þættir bætt við skrúfugöngum á síðunni, jafnvel þótt allt innihald birtist án þess að þurfa að skruna. Þetta er vegna þess að hæð eða breidd þáttarins er það fyrsta sem er reiknað út. Þá eru margar og púðar bætt við. Svo ef þú hefur frumefni með hæð 100% og efri og neðri mörk 10 punkta hvor, þá mun skrunastikan vera fyrir auka 20 punkta. Mundu að CSS kassi líkanið bætir framlegð, landamæri og padding á stærð frumefni, svo 100% með einhverjum af þessum öðrum kassa líkan gildi mun í raun vera meira en 100%.
- Ef efnið þitt tekur meira en skilgreint hæð mun það skrifa eitthvað eftir það. Með öðrum orðum, ef þú ert með hönnun með dálki sem er 80% á hæð og efnið sem er innan við það mun taka upp 100% af hæðinni, þá mun auka 20% halda áfram undir dálknum og brjóta sjónræna hönnunina af síðunni þinni. Ef það er efni undir þessum dálki, þá mun textinn einfaldlega skrifa á toppinn. Ég sé oft þetta gerast þegar vefhönnuður reynir að þvinga hæð síðu og fær það að virka fullkomlega fyrir sjósetja, en þegar efni á þessari síðu breytist í framtíðinni, hækka heildarhæð þeirra flæði síðunnar. Þetta er tvöfalt satt þegar þú ert að byggja upp móttækilegar vefsíður þar sem breidd og hæð verða að breytast með stærð sjónarhússins.
Til að laga þetta geturðu stillt hæð frumefnisins líka. Ef þú setur það í sjálfvirkt farartæki birtast skrunastikur ef þær eru nauðsynlegar en hverfa þegar þau eru ekki. Það lagar sjónræna hlé, en það bætir rolla þar sem þú getur ekki viljað þá.
Using Viewport Units
Önnur leið til að takast á við þessa áskorun er að gera tilraunir með CSS Viewport Units. Með því að nota mælingar á úthlutunarhæð er hægt að stilla þætti til að taka upp skilgreindan hæð sjónvarpsins og það breytist þegar sjónarhornið breytist! Þetta er frábær leið til að fá 100% hæðarmyndirnar þínar á síðu en hafa þau ennþá sveigjanleg fyrir mismunandi tæki og skjástærð.