Uobičajeno postavljeno pitanje u web dizajnu je "kako postaviti visinu elementa na 100%"?
Ovo može izgledati kao jednostavan odgovor. Jednostavno upotrijebite CSS da biste postavili visinu elementa na 100%, ali to se uvijek ne proteže kako bi odgovarao cijelom prozoru preglednika. Doznajemo zašto se to dogodi i što možete učiniti kako biste postigli ovaj vizualni stil.
Piksela i postotaka
Kada definirate visinu elementa pomoću svojstva CSS i vrijednosti koja koristi piksel, taj će element u pregledniku zauzeti toliko vertikalnog prostora.
Na primjer, odlomak s visinom: 100px; zauzima 100 piksela vertikalnog prostora u vašem dizajnu. Nije važno koliko je vaš prozor preglednika veći, ovaj element bit će 100 piksela visine.
Postotci različito funkcioniraju od piksela. Prema specifikaciji W3C, visine postotka izračunate su u odnosu na visinu kontejnera. Dakle, ako stavite stavku s visinom: 50%; unutar diva s visinom od 100px, odlomak će biti 50 piksela visine, što je 50% njegovog roditeljskog elementa.
Zašto postotak visine ne uspije
Ako izrađujete web stranicu i imate stupac koji želite preuzeti punu visinu prozora, prirodna je sklonost dodati visinu: 100%; na taj element. Uostalom, ako širinu postavite na širinu: 100%; element će zauzeti cijeli horizontalni prostor stranice, tako da visina treba raditi isto, zar ne? Nažalost, to uopće nije slučaj.
Da biste shvatili zašto se to dogodi, morate razumjeti kako pretraživači tumače visinu i širinu. Web preglednici izračunavaju ukupnu dostupnu širinu kao funkciju otvaranja prozora preglednika. Ako ne postavite vrijednosti širine u dokumentima, preglednik će automatski prenijeti sadržaj kako bi popunio cijelu širinu prozora (100% širina je zadana).
Visina vrijednosti izračunava se različito od širine. U stvari, preglednici ne procjenjuju visinu uopće osim ako sadržaj nije toliko dugo da ide izvan okvira (time zahtijeva trake za pomicanje) ili ako web dizajner postavlja apsolutnu visinu elementa na stranici. Inače, preglednik jednostavno dopušta protok sadržaja unutar širine prozora dok se ne završi. Visina zapravo uopće nije izračunata.
Problemi nastaju kada postavite visinu postotka na elementu koji ima elemente roditelja bez postavljanja visine - drugim riječima, osnovni elementi imaju zadanu visinu: auto; , Zapravo ste tražili da preglednik izračuna visinu od nedefinirane vrijednosti. Budući da bi bila jednaka null vrijednosti, rezultat je da preglednik ne radi ništa.
Ako želite postaviti visinu na web stranicama na postotak, morate postaviti visinu svakog elementa roditelja onoga kojeg želite definirati. Drugim riječima, ako imate ovakvu stranicu:
Sadržaj ovdje
Vjerojatno biste htjeli da div i stavak u njemu imaju visinu od 100%, ali taj div ima dva glavna elementa:
i. Da biste definirali visinu divove na relativnu visinu, morate postaviti i visinu tijela i HTML elemenata.
Zato biste trebali upotrebljavati CSS da biste postavili visinu ne samo divova, već i tijela i HTML elemenata. To može biti izazov jer možete brzo preopteretiti sve što je postavljeno na 100% visinu, samo da bi se postigao taj željeni učinak.
Neke stvari koje treba primijetiti kada radite s 100% visinama
Sada kad znate postaviti visinu elemenata svoje stranice na 100%, može biti uzbudljivo ići na sve stranice, ali postoji nekoliko stvari o kojima biste trebali biti svjesni:
- Margine i padding možete dodati traku za pomicanje na mjestu gdje ga ne želite. Jedna od najpoželjnijih stvari koje sam pronašla s radom s postotnim visinama (i širinama) jest ta da padding i margine na tim istim elementima mogu dodati trake za pomicanje na stranicu, iako se sav sadržaj prikazuje bez potrebe za pomicanjem trake. To je zato što je visina ili širina elementa prva stvar koja se izračunava. Zatim se dodaju margine i paddings. Dakle, ako imate element s visinom od 100% i gornjim i donjim marginama od po 10 piksela, bit će traka za pomicanje za dodatnih 20 piksela. Imajte na umu da model CSS okvira dodaje marginu, granicu i padding na veličinu elementa, pa će 100% s bilo kojom od tih vrijednosti ostalih modula okvira biti više od 100%.
- Ako vaš sadržaj zauzima više od navedene visine, nakon njega će prebrisati sve. Drugim riječima, ako imate dizajn s stupom koji je visoka od 80%, a sadržaj koji je unutar njega zauzima 100% visine, dodatnih 20% će se nastaviti ispod stupca i razbiti vizualni dizajn vaše stranice. Ako se ispod tog stupca nalazi sadržaj, tekst će jednostavno napisati preko vrha. Često vidim da se to događa kada web dizajner nastoji prisiliti visinu stranice i postiže savršeno funkcioniranje za pokretanje, ali kada se sadržaj na toj stranici promijeni u budućnosti, njihove apsolutne visine potpuno razbijaju protok stranice. To je dvostruko istinito kada izrađujete responzivne web stranice čija se širina i visina moraju mijenjati s veličinom prozora.
Da biste to popravili, možete podesiti i visinu elementa. Ako ga postavite na automatsko, pojavit će se trake za pomicanje ako su potrebne, ali nestaju kada nisu. To popravlja vizualni prekid, ali dodaje scrollbars gdje ih možda ne želite.
Upotreba jedinica za prikaz
Drugi način na koji možete uhvatiti se u koštac s ovim izazovom jest eksperimentirati s CSS Viewport Unitom. Koristeći mjernu jedinicu visine visine prozora možete veličinu elemenata zauzimati određenu visinu prozora i to će se mijenjati dok se promjena okvira mijenja! Ovo je odličan način da dobijete 100% vizualne visine na stranici, ali im ipak budete fleksibilni za različite uređaje i veličine zaslona.