Kako postaviti div element na 100% visine browsera?
Vodič je stariji od 2 godine i možda nije u potpunosti aktualan.
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. ;)
Pogledajte još i sljedeće vodiče
Nadamo se da je ovaj vodič koristio. Ako imate pitanja, možete nam se obratiti putem formulara pitajte učitelja
