Forum PHP.pl > [HTML][CSS]DIV i AUTO WYSOKOSC

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]DIV i AUTO WYSOKOSC

pilgrim

6.11.2009, 20:48:59

Witam Ponownie

Mam problem z ustawieniem wysokosci diva.
Do rzeczy:
Mam za pomoca slidera przesuwana strone w pionie, 4 divy zawierajace rozny kontent, pierwszy div zawiera obrazek ustawiony jako tlo, pozostale zawieraja pare innych pierdol, interesuje mnie to czy mozna ustawic auto wysokosc pierwszego diva tak by dopasowywal sie do wysokosci okna przegladarki.

poznizszy link przedstawia obecna sytuacje:
http://dtp-sklad.pl/div/test.html

zalezy mi na tym aby pierwszy div ustawial sie zawsze tak by wypelnial cala wysokosc okna przegladarki.

Mam nadzieje ze jasno to wszystko w miare opisalem

Z gory dzieki

sadistic_son

6.11.2009, 21:12:11

Nie osiągniesz takiego efektu samym CSS. Jedyne co przychodzi mi do głowy to wychwycenie rezdzielczosci javascriptem, przekazanie zmiennych do php za pomoca np. cookies a nastepnie dopasowanie diva do rozdzielczosci. Ale to i tak sie nie sprawdzi w przypadku gdy user zmieni rozmiar okna, np gdy nie ma go zmaksymalizowanego.
Nie wiem, moze ktos ma lepszy pomysl.

pilgrim

6.11.2009, 21:22:31

Szukalem wlasnie rozwiazan zwiazanych z java ale srednio funkcjonalne - lub kiepsko szukalem - jakkolwiek dzieki

Daiquiri

7.11.2009, 00:10:17

Jeżeli chcesz rozciągnąć pojedynczego DIVa na 100% wysokości to wystarczy:

[HTML] pobierz, plaintext 
<html>
<head>
<title></title>
 
<style type="text/css" media="screen">
body {
  padding:0; margin:0; 
  height:100%; 
}
#jakisdiv {
   position:absolute;
   left:0; top:0; padding:0;
   width:500px;
   height:100%; 
}
</style>
</head>
 
<body>
<div id="jakisdiv">
zawartość
</div>
</body>
</html> 
[HTML] pobierz, plaintext

Nie chce mi się szczerze powiedziawszy wgłębiać teraz w Twój kod, ale może Ci się to przyda. Nie wiem czy dobrze Cię rozumiem, ale kluczem do ustawienia wysokości na 100% jest ustawienie parametru height: 100% dla rodzica (np. body).

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.