Veebisaidi kujundamisel on tavaliselt küsimus, kuidas määrata elemendi kõrgus 100% -ni?
See võib tunduda lihtne vastus. Kasutage lihtsalt CSS-i, et määrata elemendi kõrgus 100% -le, kuid see ei laienda alati seda elementi kogu brauseri aknasse. Vaatame, miks see juhtub ja mida saate selle visuaalse stiili saavutamiseks teha.
Pikslid ja protsendid
Kui määrate elemendi kõrguse CSS-i vara ja väärtuse abil, mis kasutab piksleid, võtab see element brauseris nii palju vertikaalset ruumi.
Näiteks lõik kõrgusega: 100 pikslit; võtab teie disainis 100 pikslit vertikaalset ruumi. Pole tähtis, kui suuremad on teie brauseri aken, on see element 100 pikslit kõrgusel.
Protsendid töötavad erinevalt pikslitest. Vastavalt W3C spetsifikatsioonile arvutatakse kõrguse protsent konteineri kõrguselt. Nii et kui panete lõigu kõrgusega: 50%; 100 pikslit kõrgusel lõigus on lõigu kõrgus 50 pikslit, mis on 50% selle põhielemendist.
Miks protsentuaalne kõrgus ei toimi
Kui kujundate veebilehte ja teil on veerg, milles soovite akna täispikkust üles tõusta, on looduslik kalduvus lisada kõrgus: 100%; selle elemendi juurde. Lõppude lõpuks, kui määrate laiuse laiuseni: 100%; element võtab kogu lehekülje horisontaalsesse ruumi, nii et kõrgus peaks töötama sama, õige? Kahjuks pole see üldse nii.
Selleks, et mõista, miks see juhtub, peate mõistma, kuidas brauser tõlgendab pikkust ja laiust. Veebibrauserid arvutavad kogu saadaoleva laiuse funktsioonina selle järgi, kui suur on brauseriakna avamine. Kui te ei määra oma dokumentide laiuse väärtusi, laadib brauser automaatselt sisu, et täita kogu akna laiust (vaikimisi on 100% laius).
Kõrguse väärtus arvutatakse erinevalt kui laius. Tegelikult ei hinda brauserid kõrgust üldse, välja arvatud juhul, kui sisu on nii pikk, et see väljub vaateaknast väljapoole (seega nõutakse kerimisribasid) või kui veebidisainer määrab lehe elemendi absoluutse kõrguse. Vastasel juhul lubab brauser lihtsalt vaadata sisu vaatevälja laiust kuni selle lõppemiseni. Kõrgust ei arvestata üldse.
Probleemid ilmnevad siis, kui määrate kõrguse protsendi kõrguse elemendiga, mille alamvalgusid pole kõrgendatud - teisisõnu, vanemate elementide vaikimisi kõrgus: auto; . Tegelikult küsib brauserit määratlemata väärtuse kõrgus arvutamiseks. Kuna see võrdub nullväärtusega, on tulemuseks see, et brauser ei tee midagi.
Kui soovite oma veebilehtedele määrata kõrguse protsendina, peate määrama selle kõrguse iga kõrgema elemendi kõrguse. Teisisõnu, kui teil on selline leht:
Sisu siin
Tõenäoliselt tahate divi ja selle lõigu 100% kõrgust, kuid sellel on kaks põhielementi:
ja Selleks, et määratleda divi kõrgus suhteliseks kõrguseks, peate määrama ka keha ja html-elementide kõrgus.
Nii et peate kasutama CSS-i, et määrata mitte ainult divi, vaid ka keha ja html-elementide kõrgus. See võib olla väljakutse, kuna võite kiiresti saada ülekoormatud, kui kõik on 100% kõrgusel, ainult soovitud efekti saavutamiseks.
Mõned asjad, mida 100% kõrgustel töötades tuleb tähelepanu pöörata
Nüüd, kui tead, kuidas oma lehe elementide kõrgus seada 100% -ni, võib olla huvitav minna ja teha seda kõigile oma lehtedele, kuid teil on mõned asjad, millest peaksite teadma:
- Varud ja padjad võivad lisada kerimisriba, kus te seda ei soovi. Üheks kõige tüütuks asjadest, mida ma kasutanud koos kõrgusega (ja laiustega) töötades, on see, et nende samade elementide polster ja marginaalid võivad lehele lisada kerimisribasid, kuigi kogu sisu kuvatakse ilma kerimisribasid vaja. Seda seetõttu, et elemendi kõrgus või laius on esimene asi, mida arvutatakse. Siis lisatakse marginaalid ja padjad. Nii et kui teil on elemendi kõrgus 100% ja üleval ja alumises servas on 10 pikslit, siis on 20-pikslise täiendava kerimisribal. Pidage meeles, et CSS-kastide mudel lisab elemendi suurusele marginaali, piiri ja polsterduse, seega on 100% nende teiste kasti mudelväärtustega tegelikult üle 100%.
- Kui teie sisu kulub rohkem kui määratletud kõrgusega, kirjutab see pärast seda midagi üle. Teisisõnu, kui teil on disaini, mille kõrgus on 80% ja selle sees olev sisu võtab 100% kõrgusest, siis lisandub 20% veerust allpool ja murrab visuaalset disaini teie lehelt. Kui sellel veerul on sisu, kirjutab tekst lihtsalt üle selle. Ma näen tihti sellist juhtumit, kui veebidisainer üritab lehe kõrgust sundida ja kasutab seda käivitamiseks suurepäraselt, kuid kui sellel lehel olev sisu muutub tulevikus, lõhub nende absoluutne kõrgus lehe voolu. See on kahtlemata tõsi, kui ehitate tundlikke veebisaite, mille laius ja pikkus peavad vaatepordi suuruses muutuma.
Selle parandamiseks võite määrata ka elemendi kõrguse. Kui määrate selle automaatselt, kuvatakse kerimisribad, kui need on vajalikud, kuid need kaovad, kui neid pole. See parandab visuaalset pausi, kuid see lisab kerimisriba, kus te ei soovi neid.
Viewport-üksuste kasutamine
Teine võimalus selle probleemi lahendamiseks on katsetada CSS Viewport üksusi. Vaatekauguse mõõtühiku mõõtühikute abil saate vaadata vaateava määratletud kõrgust ja see muutub vaatluspunkti muutumisel! See on suurepärane võimalus oma 100% -lise kõrgusega visuaalide saamiseks lehel, kuid see peab olema paindlik erinevatele seadmetele ja ekraani suurustele.