Odstotne vrednosti v CSS je lahko težavno. Ko nastavite višino Lastnost CSS elementa na 100%, na kaj točno ga nastavljate na 100%? To je glavno vprašanje, s katerim se srečujete pri obravnavi odstotkov v CSS-ju, in ker postavitve postajajo bolj zapletene, to postane je toliko težje slediti odstotkom, kar ima za posledico nenavadno čudno vedenje, če niste previdno.
Delo z odstotki ima izrazito prednost; postavitve na osnovi odstotka se samodejno prilagodijo različnim velikostim zaslona. Zato je uporaba odstotkov bistvenega pomena pri odzivnem oblikovanju. Priljubljeni mrežni sistemi in ogrodja CSS uporabljajo odstotne vrednosti za ustvarjanje svojih odzivnih mrež.
Jasno je, da obstajajo nekatere situacije, ki so primernejše za statične vrednosti, in druge, ki veliko bolje delujejo s prilagodljivimi elementi, na primer z odstotki. Odločiti se boste morali, katero pot boste ubrali z elementi v vaši zasnovi.
Statične enote
Piksli so statični. Deset slikovnih pik na eni napravi je deset slikovnih pik na vsaki napravi. Seveda obstajajo stvari, kot so gostota in način, kako naprava dejansko razlaga, kaj je slikovna pika, vendar večjih sprememb ne boste nikoli videli, ker je zaslon drugačne velikosti.
S CSS lahko enostavno definirate elemente višina v slikovnih pikah, in ostalo bo enako. To je predvidljivo.
div {
višina: 20px;
}
To se ne bo spremenilo, če tega ne spremenite z JavaScriptom ali kaj podobnega.
Zdaj je kovanec še ena plat. Ne bo se spremenilo. To pomeni, da boste morali vse natančno izmeriti in tudi takrat vaše spletno mesto ne bo delovalo v vseh napravah. Zato statične enote ponavadi delujejo bolje za podrejene elemente, medije in stvari, ki se bodo začele izkrivljati in videti čudno, če se raztezajo in rastejo.
Nastavitev višine elementa na 100%
Ko nastavite višino elementa na 100%, ali se ta razširi na celotno višino zaslona? Včasih. CSS vedno obravnava odstotke kot odstotek nadrejenega elementa.
Brez nadrejenega elementa
Če ste ustvarili svež ki jo vsebuje samo oznaka telesa vašega spletnega mesta, bo 100% verjetno enaka višini zaslona. To je, razen če za.
HTML:
CSS:
div {
višina: 100%;
}
To višina elementa bo enaka višini zaslona. Privzeto je zajema celoten zaslon, zato je osnova, ki jo uporablja vaš brskalnik pri izračunu višine elementa.
Z nadrejenim elementom s statično višino
Ko je vaš element ugnezden znotraj drugega elementa, se brskalnik bo uporabil višino nadrejenega elementa za izračun vrednosti za 100%. Torej, če je vaš element znotraj drugega elementa, ki ima višino 100 px, in nastavite višino podrejenega elementa na 100%. Podrejeni element bo visok 100 slikovnih pik.
HTML:
CSS:
#parent {
višina: 100px;
}
#child {
višina: 100%;
}
Višina, ki je na voljo za podrejeni element, je omejena z višino nadrejenega elementa.
Z nadrejenim elementom z odstotno višino
Morda se zdi nasprotno intuitivno, vendar lahko višino elementa nastavite na odstotek v odstotkih. Ko ima element nadrejeni element, katerega višina je prav tako določena kot odstotna vrednost, bo brskalnik uporabil enako vrednost kot nadrejeni, ki jo je že izračunal na podlagi nadrejene. To je zato, ker je 100% vrednosti še vedno ta vrednost.
CSS:
#parent {
višina: 75%;
}
#child {
višina: 100%;
}
V tem primeru je višina nadrejenega elementa 75% celotnega zaslona. Otrok je torej na voljo tudi 100% celotne višine.
Z nadrejenim elementom brez višine
Zanimivo je, da če nadrejeni element nima določene višine, brskalnik nadaljuje naraščanje po nivojih, dokler ne najde konkretne vrednosti, s katero lahko deluje. Če je vse do ne da bi kaj našel, bo brskalnik privzeto določil višino zaslona, tako da bo vaš element imel enakovredno višino.
HTML:
CSS:
#parent {}
#child {
višina: 100%;
}
Podrejeni element se razteza vse do vrha in dna zaslona.
Enote preglednika
Ker je izračun z odstotnimi enotami lahko zapleten in je vsak element vezan na svojega nadrejenega, obstaja nabor enot, ki ignorirajo vse to in osnovne velikosti elementov neposredno z razpoložljivega zaslona vesolja. To so enote vidnega polja in vam dajo neposredno velikost glede na višino ali širino zaslona, ne glede na to, kje se nahaja element.
Če želite nastaviti elemente višina enaka višini zaslona, vrednost njegove višine nastavite na 100vh.
div {
višina: 100vh;
}
Pri tem je enostavno razbiti postavitev in zavedati se morate, kateri drugi elementi bodo vplival, vendar je polje za ogled daleč najbolj neposreden način za nastavitev višine elementa na 100% zaslon.