Forum PHP.pl > [JavaScript][CSS]Wysokość elementu dopasowująca się do wysokości przeglądarki.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][CSS]Wysokość elementu dopasowująca się do wysokości przeglądarki.

Ludwik94

11.12.2010, 23:59:08

Witam, w trakcie pisania strony napotkałem dość, mam nadzieje prosty do rozwiązania problem.
Strona "z problemem"
To jest konkretnie ta strona oparta na div'ach. Chciałbym aby treść strony dopasowywała się do wysokości okna przeglądarki/monitora. Teraz jest ustawiona stale na 400px. Jeżeli ktoś otworzy ją na monitorze np. 1000px w pionie to chciałbym aby treść strony zajęła 100% wysokości minus wysokość nagłówka i stopki.
Mam nadzieję, że jasno i zrozumiale, myślę, że sam HTML i CSS nie wystarczy i trzeba by wykorzystać JavaScript.
Pozdrawiam.

wdev

12.12.2010, 00:39:55

Jak może być jQuery, to poniższy kod powinien cię zadowolić (dostosuj sobie tylko odpowiednie selektory).

[JAVASCRIPT] pobierz, plaintext 
(function($){
  $(document).ready(function(){
    $('#content').height($(window).height() - $('#footer').height() - $('#header').height());
  });
 
  $(window).resize(function(){
     $('#content').height($(window).height() - $('#footer').height() - $('#header').height());
  });
})(jQuery);
[JAVASCRIPT] pobierz, plaintext

Ludwik94

12.12.2010, 17:04:06

Wkleiłem ten kod na końcu strony poza znacznikiem </html> w

[HTML] pobierz, plaintext 
<script type="text/javascript">Skrypt</script> 
[HTML] pobierz, plaintext

. Jak mam dopasować te selektory? Co one oznaczają, nie mam pojęcia jak działa ten skrypt i co trzeba tam wstawić. Struktura strony wygląda: następująco:

[HTML] pobierz, plaintext 
<div id="top">
      <div id="gora">Nagłówek</div>
      <div id="tresc">Treść strony ( to co ma się dopasowywać)</div>
      <div id="dol">Stopka</div>
</div>
[HTML] pobierz, plaintext

Pozdrawiam.

wdev

13.12.2010, 23:10:51

1. Tag script powinien być wewnątrz tagu <html>, ten skrypt który Ci przesłałem będzie działał nawet w <head> i tam powinien być.
2. Żeby uruchomić jQuery należy skorzystać z zewnętrznej biblioteki (pomoc na stronach Google, jQuery, a zupełne podstawy też np. tu).
3. W skrócie - selectory to to, co jest pomiędzy $(' i ') np. $('#content') to element od id content. Składnia selectorów taka jak css.

PS. Polecam nauczenie się jQuery. Czysty JavaScript to mordęga w porównaniu z tym

Ludwik94

19.12.2010, 22:59:32

Poczytam o tym jQuery, ale naukę odłożę na potem. Dziś priorytetem jest szkoła -->strona www --> nauka php. Domyślam się, że dla mojej strony (zamieszczonej powyżej) konstrukcja skryptu powinna wyglądać dokładnie tak:

[XML] pobierz, plaintext 
(function($){
  $(document).ready(function(){
    $('#tresc').height($(window).height() - $('#dol').height() - $('#gora').height());
  });
 
  $(window).resize(function(){
     $('#tresc').height($(window).height() - $('#dol').height() - $('#gora').height());
  });
})(jQuery);
[XML] pobierz, plaintext

Nie wiem jakie identyfikatory wstawić w jakie miejsca skryptu.
Poczytam o tych bibliotekach i spróbuje uruchomić to.

Próbowałem zastosować skrypt który kolega zaproponował, ale nie umiem go dostosować. Jest to bardzo ważne, ponieważ robię tą stronę jako prezent i chciałbym aby była gotowa przed wigilią. Jeszcze raz link do stony: Odwiedź moją stronę. Chciałbym aby treść strony dostosowywała się do wysokości okna przeglądarki. Proszę, pomóżcie, to dla mnie ważne.

wdev

20.12.2010, 08:28:58

Musisz zmienić #all na #middle, bo to tego elementu wysokość chcesz ustalić. I tak poza tym zainstalowałeś stare jQuery

Ludwik94

20.12.2010, 15:48:49

Działa! Masz u mnie duuuuże piwo

Dzięki wielkie za pomoc.

edit: mam jeszcze jedno pytanie. W jaki sposób można ograniczyć maksymalną wysokość #middle? Tak, żeby nawet jak ekran ma 2000pikseli w pionie to element #middle miał max. np. 1000px.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.