Postotne vrijednosti u CSS može biti zeznuto. Kad postavite visinu CSS svojstvo elementa na 100% na što ga točno postavljaš? To je glavno pitanje na koje nailazite kad se bavite postocima u CSS-u, a kako postaju složeniji, to postaje i ono postaje toliko teže pratiti postotke, što rezultira nekim bizarnim ponašanjem, ako niste oprezno.
Rad s postocima ima izrazitu prednost; rasporedi zasnovani na postocima automatski se prilagođavaju različitim veličinama zaslona. Zato je upotreba postotaka presudna u responzivnom dizajnu. Popularni mrežni sustavi i CSS okviri koriste postotne vrijednosti za stvaranje svojih responzivnih mreža.
Jasno je da postoje određene situacije koje više odgovaraju statičkim vrijednostima i druge koje puno bolje rade s nečim prilagodljivim, poput postotaka. Morat ćete odlučiti kojim putem krenuti s elementima u vašem dizajnu.
Statičke jedinice
Pikseli su statični. Deset piksela na jednom uređaju je deset piksela na svakom uređaju. Svakako, postoje stvari poput gustoće i načina na koji uređaj zapravo interpretira što je piksel, ali nikada nećete vidjeti velike promjene jer je zaslon različite veličine.
Pomoću CSS-a možete jednostavno definirati elemente visina u pikselima, i ostat će isti. Predvidljivo je.
div {
visina: 20px;
}
To se neće promijeniti ako ga ne promijenite s JavaScriptom ili nečim sličnim.
Sada postoji još jedna strana te medalje. Neće se promijeniti. To znači da ćete trebati sve precizno izmjeriti, a čak ni tada vaša web lokacija neće raditi na svim uređajima. Zbog toga statičke jedinice teže raditi bolje za podređene elemente, medije i stvari koje će se početi iskrivljavati i izgledati čudno ako se protežu i rastu.
Postavljanje visine elementa na 100%
Kada visinu elementa postavite na 100%, proteže li se ona na cijelu visinu zaslona? Ponekad. CSS uvijek tretira postotne vrijednosti kao postotak nadređenog elementa.
Bez roditeljskog elementa
Ako ste stvorili svježu to sadrži samo oznaka tijela vaše web lokacije, 100% će vjerojatno biti jednako visini zaslona. To je osim ako niste definirali vrijednost visine za.
HTML:
CSS:
div {
visina: 100%;
}
Da visina elementa bit će jednaka visini zaslona. Prema zadanim postavkama obuhvaća cijeli zaslon, pa je to osnova koju vaš preglednik koristi pri izračunavanju visine elementa.
S roditeljskim elementom sa statičnom visinom
Kada je vaš element ugniježđen unutar drugog elementa, preglednik koristit će visinu nadređenog elementa za izračun vrijednosti za 100%. Dakle, ako je vaš element unutar drugog elementa koji ima visinu od 100 piksela, a visinu podređenog elementa postavite na 100%. Podređeni element bit će visok 100 piksela.
HTML:
CSS:
#parent {
visina: 100px;
}
#dijete {
visina: 100%;
}
Visina dostupna podređenom elementu ograničena je visinom roditelja.
S roditeljskim elementom s postotnom visinom
Možda se čini kontraintuitivno, ali visinu elementa možete postaviti na postotak postotka. Kada element ima nadređeni element koji također ima visinu definiranu kao postotna vrijednost, preglednik će upotrijebiti istu vrijednost kao nadređeni koji je već izračunao na temelju nadređenog. To je zato što je 100% vrijednosti i dalje ta vrijednost.
CSS:
#parent {
visina: 75%;
}
#dijete {
visina: 100%;
}
U ovom je slučaju visina nadređenog elementa 75% cijelog zaslona. Dijete je tada također 100% ukupne visine na raspolaganju.
S roditeljskim elementom bez visine
Zanimljivo je da kada nadređeni element nema definiranu visinu, preglednik će se povećavati nivo po nivo dok ne pronađe konkretnu vrijednost s kojom može raditi. Ako uspije sve do a da ništa ne pronađe, preglednik će zadati visinu zaslona, dajući vašem elementu ekvivalentnu visinu.
HTML:
CSS:
#parent {}
#dijete {
visina: 100%;
}
Podređeni element proteže se sve do vrha i dna zaslona.
Jedinice vidnog polja
Budući da izračun s postotnim jedinicama može biti lukav, a svaki je element vezan za svog roditelja, postoji skup jedinica koje ignoriraju sve to i osnovne veličine elemenata izravno s dostupnog zaslona prostor. To su jedinice okvira za prikaz i daju vam izravnu veličinu na temelju visine ili širine zaslona, bez obzira gdje se element nalazi.
Da biste postavili element visina jednaka visini zaslona, postavite vrijednost njegove visine na 100vh.
div {
visina: 100vh;
}
Čineći ovo lako je razbiti svoj izgled i morat ćete biti svjesni koji će drugi elementi biti na to utječe, ali okvir za prikaz daleko je najneposredniji način postavljanja visine elementa na 100% od zaslon.