Vodič je stariji od 2 godine i možda nije u potpunosti aktualan. Za provjeru, koristite “pitaj učitelja”.

Kako postaviti div element na 100% visine browsera?

Kako postaviti div element na 100% visine browsera?
Autor članka: Igor Kovačić
Kategorije: Programiranje, Trikovi
Teme: ,
Datum objave: 14.08.2011

U ovom kratkom CSS i (x)HTML vodiču otkriti ćemo kako postaviti div na 100% visine browsera isključivo korištenjem CSS-a. S ovim problemom vjerojatno ste se imali prilike susresti ukoliko se bavite izradom web stranica.

(x)HTML

(x)HTML kôd unutar body taga izgleda ovako:
<div id="wrap"></div>
<div id="container">
<!-- Sadržaj stranice -->
</div>

CSS

Recimo da div sa id-om wrap treba razvući na 100% visine vidljivog dijela browsera. U tom slučaju CSS kôd treba izgledati ovako:
* { margin: 0; padding: 0; }
#wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
#container { position: relative; }

Kratko objašnjenje

Div element sa id-om wrap razvući će se na 100% širine i visine vidljivog dijela browsera zbog top, right, bottom i left property-a. Potrebno je postaviti i position: fixed; za slučaj kada div sa id-om container ima veću visinu od vidljivog dijela prozora.

CSS position property na selektoru #container postavili smo kako div sa id-om wrap ne bi prešao preko sadržaja diva sa id-om container.

Ovaj trik često je primjenjiv kod izrade overlaya preko cijelog sadržaja.

Napomena: Trik ne funkcionira u Internet Exploreru 6.

Nadamo se da Vam je vodič koristio. ;)

Komentirajte prvi!

Pratite komentare na članak 'Kako postaviti div element na 100% visine browsera?' putem RSS feeda.

Ostavite komentar na ovaj članak

Uvredljivi i spam komentari biti će obrisani. Ukoliko se Vaš komentar ne pojavi odmah, pričekajte da ga odobrimo ;-). Odgovore na pitanje brže ćete dobiti ukoliko nas kontaktirate putem forme pitajte učitelja.