Prilikom izrade modernih web stranica, jedan od najčešćih izazova s kojima se susreću developeri jest precizno upravljanje visinom elemenata. Specifično, potreba za kreiranjem elementa koji zauzima točno 100% visine vidljivog dijela prozora (tzv. viewporta) javlja se u mnogim scenarijima – od izrade pozadinskih slika koje moraju prekriti cijeli ekran, preko bočnih navigacijskih izbornika, pa sve do modalnih prozora i slojeva (overlaya) koji blokiraju interakciju s ostatkom stranice.
Iako na prvi pogled čini se da je dovoljno postaviti vrijednost height: 100%, u praksi se često događa da element ne popuni prostor onako kako očekujemo. To je zato što CSS-ovi postotci za visinu ovise o visini roditeljskog elementa. Ako roditelj nema definiranu visinu, dijete ne zna koliki postotak treba zauzeti. U ovom članku detaljno ćemo istražiti najučinkovitije metode za rješavanje ovog problema, s posebnim naglaskom na korištenje fiksiranog pozicioniranja i modernih CSS jedinica.
Metoda fiksiranog pozicioniranja za potpuni prekriv
Jedan od najsigurnijih načina za postizanje elementa koji zauzima cijeli ekran, bez obzira na sadržaj koji se nalazi ispod njega, jest korištenje svojstva position: fixed. Ova metoda je iznimno korisna kada želite kreirati overlay koji treba biti neovisan o pomicanju stranice (scrollanju).
Kada elementu dodijelimo fiksni položaj, on se više ne ponaša kao dio normalnog toka dokumenta, već se pozicionira relativno u odnosu na vidni okvir. Da bismo ga razvukli preko cijelog ekrana, potrebno je postaviti sve četiri smjernice (top, right, bottom i left) na nulu. Kako bismo to postigli u praksi, primijenit ćemo sljedeći pristup.
Primjer HTML strukture:
U našem primjeru imamo dva glavna elementa: #wrap koji služi kao pozadinski sloj ili overlay, i #container koji sadrži stvarni sadržaj stranice.
<div id="wrap"></div>
<div id="container"> <!-- Sadržaj vaše stranice ovdje -->
</div>Primjer CSS koda:
* { margin: 0; padding: 0; box-sizing: border-box; } #wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; } #container { position: relative; z-index: 1; }U ovom kodu, #wrap će uvijek zauzimati 100% širine i visine prozora, čak i ako je sadržaj u #container elementu puno dulji od samog ekrana. Korištenje position: relative na kontejneru sadržaja pomaže u upravljanju slojevima putem z-index svojstva, osiguravajući da se elementi ne preklapaju na neželjen način.
Razlika između postotka (%) i viewport jedinica (vh)
Važno je razumjeti zašto klasični height: 100% često ne daje željeni rezultat. Da bi div imao visinu od 100%, njegov roditelj (u ovom slučaju body i html) također mora imati definiranu visinu od 100%. Ako to niste postavili, preglednik će interpretirati visinu elementa kao 100% od nula, što rezultira time da element bude visok samo onoliko koliko je visok njegov stvarni sadržaj.
Moderna alternativa tome su Viewport Height (vh) jedinice. Jedna vh jedinica iznosi 1% visine vidnog okvira. Dakle, 100vh je uvijek točno visina vidljivog dijela ekrana, bez obzira na to kolika je visina roditeljskog elementa.
Kada koristiti koju metodu?
position: fixed: preporučljivo za modale, pop-up prozore i pozadine koje ne smiju nestati prilikom scrollanja;height: 100vh: optimalno za “hero” sekcije na početnoj stranici ili stranice koje se sastoje od više punostraničnih sekcija;height: 100%: najbolje rješenje u strogo definiranim layoutima gdje su svi roditeljski elementi već precizno dimenzionirani.
Česte pogreške i praktični savjeti
Prilikom implementacije visine od 100%, developeri često nailaze na nekoliko uobičajenih problema koji mogu pokvariti korisničko iskustvo.
1. Problem s adresnom trakom na mobilnim uređajima:
Na mobilnim preglednicima, 100vh ponekad uključuje i prostor koji zauzima adresna traka. To može dovesti do toga da donji dio vašeg elementa bude “odrezan” ili da se pojavi nepotrebni scroll. Rješenje za ovo je korištenje novijih CSS jedinica kao što su svh (small viewport height) ili dvh (dynamic viewport height) koje dinamički prilagođavaju visinu ovisno o vidljivosti trake.
2. Margin i Padding:
Započnite svoj CSS resetom margina i paddinga. Preglednici po defaultu dodaju određeni razmak oko body elementa. Ako postavite element na 100% visine, a zaboravite ukloniti defaultne margine, pojavit će se horizontalni i vertikalni scrollbar jer će ukupna visina biti 100% + defaultna margina.
3. Box-sizing:
Uvijek koristite box-sizing: border-box;. Bez ovoga, ako elementu dodate padding ili okvir (border) na element koji već ima 100% visine, taj padding će se dodati na ukupnu visinu, što će opet uzrokovati pojavu scrollbara.
Zaključak
Postavljanje div elementa na 100% visine browsera može se postići na više načina, ovisno o tome što želite postići. Za fiksne elemente poput overlaya, kombinacija position: fixed i nultih vrijednosti za sve četiri strane je najpouzdanije rješenje. Za moderne layouty, 100vh ili 100dvh pružaju najjednostavniji i najčistiji pristup.
Ključ uspjeha leži u razumijevanju kako CSS interpretira visinu i u pravilnom upravljanju razmacima. Prateći ove smjernice, osigurat ćete da vaša web stranica izgleda profesionalno i konzistentno na svim uređajima i preglednicima.
Česta pitanja (FAQ)
Pitanje: Zašto moj div s height: 100% nije zauzeo cijeli ekran?
Odgovor: Postotak visine ovisi o roditelju. Ako body i html tagovi nemaju postavljenu visinu od 100%, vaš div neće znati koliki prostor treba popuniti. Koristite 100vh za izbjegavanje ovog problema.
Pitanje: Hoće li position: fixed raditi na svim preglednicima?
Odgovor: Da, position: fixed je standardna CSS značajka koja je podržana u svim modernim preglednicima. Jedino vrlo stari preglednici (poput IE6) imali su probleme s ovim pristupom, što u