Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][CSS]Wysokość elementu dopasowująca się do wysokości przeglądarki.
Ludwik94
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 2.12.2010
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
wdev
post
Post #2





Grupa: Zarejestrowani
Postów: 86
Pomógł: 20
Dołączył: 20.01.2010

Ostrzeżenie: (0%)
-----

Jak może być jQuery, to poniższy kod powinien cię zadowolić (dostosuj sobie tylko odpowiednie selektory).
[JAVASCRIPT] pobierz, plaintext 
  1. (function($){
  2.   $(document).ready(function(){
  3.     $('#content').height($(window).height() - $('#footer').height() - $('#header').height());
  4.   });
  5.  
  6.   $(window).resize(function(){
  7.      $('#content').height($(window).height() - $('#footer').height() - $('#header').height());
  8.   });
  9. })(jQuery);
[JAVASCRIPT] pobierz, plaintext


--------------------
-wdev-
Go to the top of the page
+Quote Post
Ludwik94
post
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 2.12.2010
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Wkleiłem ten kod na końcu strony poza znacznikiem </html> w 
[HTML] pobierz, plaintext 
  1. <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 
  1. <div id="top">
  2.       <div id="gora">Nagłówek</div>
  3.       <div id="tresc">Treść strony ( to co ma się dopasowywać)</div>
  4.       <div id="dol">Stopka</div>
  5. </div>
[HTML] pobierz, plaintext


Pozdrawiam.
Go to the top of the page
+Quote Post
wdev
post
Post #4





Grupa: Zarejestrowani
Postów: 86
Pomógł: 20
Dołączył: 20.01.2010

Ostrzeżenie: (0%)
-----

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 smile.gif


--------------------
-wdev-
Go to the top of the page
+Quote Post
Ludwik94
post
Post #5





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 2.12.2010
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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 
  1. (function($){
  2.   $(document).ready(function(){
  3.     $('#tresc').height($(window).height() - $('#dol').height() - $('#gora').height());
  4.   });
  5.  
  6.   $(window).resize(function(){
  7.      $('#tresc').height($(window).height() - $('#dol').height() - $('#gora').height());
  8.   });
  9. })(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.

Ten post edytował Ludwik94 19.12.2010, 23:00:19
Go to the top of the page
+Quote Post
wdev
post
Post #6





Grupa: Zarejestrowani
Postów: 86
Pomógł: 20
Dołączył: 20.01.2010

Ostrzeżenie: (0%)
-----

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


--------------------
-wdev-
Go to the top of the page
+Quote Post
Ludwik94
post
Post #7





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 2.12.2010
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

biggrin.gif biggrin.gif biggrin.gif Działa! Masz u mnie duuuuże piwo winksmiley.jpg 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.

Ten post edytował Ludwik94 20.12.2010, 19:09:08
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 05:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn