Najčešće postavljeno pitanje u dizajnu web sajta je "kako postaviti visinu elementa na 100%"?
Ovo može izgledati kao lak odgovor. Jednostavno koristite CSS da biste postavili visinu elementa na 100%, ali to uvijek ne ističe taj element kako bi se uklonio u cijeli prozor prozora. Hajde da saznamo zašto se ovo događa i šta možete učiniti kako biste ostvarili ovaj vizuelni stil.
Pikseli i procenti
Kada definišete visinu elementa pomoću svojstva CSS-a i vrijednosti koja koristi piksele, taj element će zauzeti toliko vertikalni prostor u pregledaču.
Na primjer, paragraf sa visinom: 100px; će u vašem dizajnu zauzimati 100 piksela vertikalnog prostora. Bez obzira na to koliko je veći prozor pregledača, ovaj element će biti visine 100 piksela.
Procenat funkcioniše drugačije od piksela. Prema W3C specifikaciji, procentualne visine se izračunavaju u odnosu na visinu kontejnera. Dakle, ako stavite paragraf sa visinom: 50%; unutar diva sa visinom od 100px, paragraf će biti visine 50 piksela, što je 50% njegovog roditeljskog elementa.
Zbog čega je procentualna visina neuspešna
Ako dizajnirate web stranicu i imate kolonu za koju želite da preuzmete punu visinu prozora, prirodni nagib je dodati visinu: 100%; na taj element. Na kraju krajeva, ako postavite širinu na širinu: 100%; element će zauzeti pun horizontalni prostor na stranici, tako da visina treba da radi isto, zar ne? Nažalost, to uopšte nije slučaj.
Da biste razumeli zašto se ovo desi, morate shvatiti kako pretraživači tumače visinu i širinu. Veb pregledači izračunavaju ukupnu širinu dostupne u funkciji koliko je širok prozor pregledača otvoren. Ako u vašoj dokumentaciji ne podesite vrijednosti širine, pretraživač će automatski prolaziti sadržaj kako bi popunio čitavu širinu prozora (podrazumevana je širina od 100%).
Visina visine se izračunava različito od širine. U stvari, pretraživači uopšte ne procenjuju visinu, osim ako je sadržaj toliko dugačak da izlazi izvan okvira za pregled (zbog čega se zahtijeva traka za pomicanje) ili ako web dizajner postavlja apsolutnu visinu za element na stranici. U suprotnom, pretraživač jednostavno omogućava protok sadržaja unutar širine prikaza dok se ne završi. Visina se uopće ne izračunava.
Problemi se javljaju kada postavite procentualnu visinu na elementu koji ima roditeljske elemente bez postavljanja visine - drugim rečima, matični elementi imaju podrazumevanu visinu: auto; . Zapravo, vi tražite od pretraživača da izračuna visinu iz nedefinisane vrednosti. Pošto bi to bilo jednako nula vrednost, rezultat je u tome što pregledač ne radi ništa.
Ako želite da postavite visinu na vašim web stranicama u procentu, morate podesiti visinu svakog roditeljskog elementa onog koji želite definisati visinom. Drugim rečima, ako imate ovakvu stranicu:
Sadržaj ovde
Verovatno želite div i paragraf u njemu da imaju 100% visinu, ali ta div zapravo ima dva roditeljska elementa:
i. Da biste definisali visinu diva na relativnu visinu, morate podesiti i visinu tijela i html elemenata.
Dakle, morate koristiti CSS da biste postavili visinu ne samo div, već i telo i html elemente. Ovo može biti izazov, pošto se brzo pretjerate da je sve postavljeno na 100% visinu, samo da biste postigli željeni efekat.
Neke stvari koje treba primetiti prilikom rada sa 100% visinama
Sada kada znate kako postaviti visinu elemenata stranice na 100%, može biti uzbudljivo i izlaziti i uraditi to na svim vašim stranicama, ali postoje nekoliko stvari koje trebate biti svjesne:
- Margine i padding mogu dodati bar za pomeranje tamo gde ga ne želite. Jedna od najneugodnijih stvari koje sam pronašao u radu sa procentualnim visinama (i širinama) je to što tada padanje i margine na istim elementima mogu dodati barijere za pomicanje na stranicu, iako se svi sadržaji prikazuju bez potrebnih traka za pomicanje. To je zato što je visina ili širina elementa prva stvar koja se izračunava. Tada se dodaju marže i padding. Dakle, ako imate element sa visinom od 100% i gornjom i donjom marginom od po 10 piksela, postaće se traka za pomeranje dodatnih 20 piksela. Zapamtite, model CSS box-a dodaje marginu, granicu i padding na veličinu elementa, tako da će 100% sa bilo kojom od tih drugih vrijednosti modela box-a biti zapravo više od 100%.
- Ako vaš sadržaj zauzima više od definirane visine, on će prepisati bilo šta posle nje. Drugim rečima, ako imate dizajn sa kolonom koja je visoka 80%, a sadržaj koji je unutar njega zauzima 100% visine, dodatnih 20% će se nastaviti ispod kolone i prekinuti vizuelni dizajn vaše stranice. Ako postoji sadržaj ispod te kolone, tekst će jednostavno napisati iznad njega. Često vidim da se to dogodilo kada web dizajner pokuša da primorava visinu stranice i savršeno radi na lansiranju, ali kada se sadržaj na toj stranici promeni u budućnosti, njihove apsolutne visine potpuno prekidaju tok stranice. Ovo je dvostruko tačno kada gradite odgovarajuće web stranice čija širina i visina se moraju mijenjati s veličinom prikaza.
Da biste to popravili, možete podesiti i visinu elementa. Ako ga podesite na auto, pojaviće se trake za pomicanje ako su potrebne, ali nestaju kada nisu. To popravlja vizuelni prekid, ali dodaje skrolovima gde ih možda ne želite.
Korišćenje Viewport jedinica
Drugi način na koji možete riješiti ovaj izazov je eksperimentisanje sa CSS Viewport jedinicama. Korišćenjem mjerne jedinice visine pogleda, elemente veličine možete preuzeti na određeni visini prikaza, a to će se mijenjati kada se promijeni pogled! Ovo je odličan način da dobijete svoje 100% visinske slike na stranici, ali ipak imajte fleksibilnost za različite uređaje i veličine ekrana.