[CSS/jQuery] Jak dopasować wysokość elementu do wysokości strony

Data dodania wpisu: 27-05-2010

Załóżmy, że blok o id "container" jest blokiem opinającym całą zawartość layoutu strony. W takim przypadku, aby dopasować wybrany element do wysokości całego layoutu trzeba pobrać całkowitą wysokość bloku według którego będziemy dobierać wymiar. Jedyną słuszną metodą, działającą na każdej przeglądarce i kIEpskim jest offsetHeight, wywoływana poniekąd z drzewa DOM (a nie jQuery). Zatem:

<script type="text/javascript">
	$(document).ready(function(){  //w przypadku jquery; normalnie: window.ready()
		var h1 = document.getElementById("container").offsetHeight;
		//do parametru h1 pobieramy calkowita wysokosc bloku o id "container"
		var h2 = h1-100; //np. pomniejszamy wysokość o 100 pikseli, co by wysokosc 
		//elementu była nieco mniejsza niz cały layout
		document.getElementById('scroller').style.height=h2+"px";
		//i do bloku o ID "scroller" dodajemy parametr wysokosci równy h2 piksli
	});
</script>

Całość wykonujemy dopiero po załadowaniu pełnej treści strony (document).ready(). Powyższy fragment kodu możemy umieścić w dowolnym miejscu kodu strony - ale jak wiadomo - Javascriptom najwygodniej pomiedzy znacznikami , a jeszcze lepiej w zewnętrznym pliku. O czym należy pamiętać, to aby element opinający ("container") posiadał własność

display: block;

w CSS. Podobna metoda jest wykorzystana na tym portfolio - wysokość scrollera jest zmienna, zależnie od wysokości contentu w podstronach z blogu;) Przy czym scroller jest oparty na jQuery ScrollPane, i dla niego musiałem uprzednio dodać dynamicznie atrybut id, ale to już osobna bajka - opwiem w innym artykule:)

Komentarze

Ten wpis nie posiada jeszcze komentarzy

Comments closed...

DesignEnd na Facebook'u

Inspiration