Skoči na sadržaj

Kako postaviti div element na 100% visine browsera?

Vodič je stariji od 2 godine i možda nije u potpunosti aktualan.

Prijavite grešku u vodiču

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.

Kako postaviti div element na 100% visine browsera?

(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. ;)

Ako imate pitanja, možete nam se obratiti putem formulara pitajte učitelja

Komentirajte prvi