Forum PHP.pl > [xhtml] Scroll w divie (overflow: auto)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [xhtml] Scroll w divie (overflow: auto)

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

Seth

23.10.2004, 01:54:02

Tak mniej wiecej wyglada struktura mojej strony:

Zrodla XHTMLa

Problem jest troche nietypowy:
otoz zalozenie jest takie, ze strona ma jakby swoja okreslona wysokosc: ktora ma wartosc 100% wielkosci okna - czyli nie moga sie pojawic zadne "glowne" scrolle.
Top i Footer maja swoje stale miejsca: Top oczywiscie zawsze na gorze, a Footer zawsze na dole - nawet jak uzytkownik zmieni wielkosc okna footer zawsze bedzie na dole.
Content zkolei ma miec szerokosc taka aby miescil sie miedzy Top, a Footer - nie moze miec wiekszej.
I teraz gdy w Content tresci bedzie na tyle duzo, ze bedzie sie z niego "wylewac" maja sie pojawic scrolle (zaznaczone na obrazku) tak aby mozna bylo owy tekst przewinac ( czyli overflow: auto ).

Jednym slowem zalozenie jest takie aby strona wygladala jak aplikacja okienkowa, ktorej oczywiscie nie trzeba przewijac calej w dol

Problem polega jednak na tym, ze Content mimo, ze ma ustawione overflow: auto nie pokazuje scrolla gdy tekst wyplywa z Content tylko przechodzi przez footer i dalej wyswietla tresc - co oczywiscie rozwala cala koncepcje :/

Strasznie jest mi to potrzebne, a siedze juz dluzszy czas (co widac po godzinie posta

) i nie moge dojsc gdzie jst blad (a moze tak sie nie da zrobic :? )

Jezeli ktos jest w stanie podac rozwiazanie badz nakierowac na jakis link byl bym bardzo wdzieczny.

P.S.
Oczywiscie zrodla layu sa zubozone wzgledem oryginalu ale podstawowa struktura mniej wiecej jest taka sama.

revyag

23.10.2004, 08:34:22

Dodaj:

Kod

body{
height:100%;
}

i ustaw procentowa wyskosc contentu:

Kod

#content{
height:70%;
}

powinno byc ok.

Seth

23.10.2004, 11:37:56

Co prawda pod IE jest taki efekt (ale tez nie do konca taki jakbym oczekiwal) to pod firefoxem juz nie dziala

Edit >--------------------------------------

Znalazlem !

Moze komus sie przyda, wiec podaje strone gdzie szczegolowo opisane sa konstrukcje layoutu opartego o div'y tak aby wygladal jak z iframeami:
http://www.fu2k.org/alex/css/frames/

revyag

23.10.2004, 12:36:37

Jeśli dodasz:

Kod

html{
height:100%;
}

Kod

#container{
height: 70%;
}

Kod

#content{
height:100%;
}

będzie ok

Seth

26.10.2004, 02:18:02

Hmm... moja radosc byla przed wczesna...
revyag: to co podales dziala i juz zaczynam chwytac o co chodzi z ta wysokoscia w div'ach z tym, ze wynik nie zadowala mnie.

Chcial bym aby wysokosc tego contentu byla dopasowywana do footera, a 70% to tak nie bardzo to robi

Przy duzych rozdzielczosciach mam spory odstep od footera, a chce miec dokladnie 10 px.

revyag

26.10.2004, 08:35:32

Nie wiem czy da się to ominąć, bo oczywiste jest, że przy wyższej rozdzielczości, wysokość podana w procentach będzie większa, tym samy odstęp między footerem i containerem też będzie większy. Ustalonego rozmiaru w pikselach też nie można podać, bo inaczej będzie to wyglądać w 1024x768 a inaczej 1280x1024.
Jedyne rozwiązanie jakie mi w tej wchwili przychodzi do głowy to użycie javascriptu. Wykryć jaka jest rozdzieloczość i względem tej rozdzielczości podawać wysokość containera.
Minusy tego rozwiązanie są takie, że strona się napewno nie zwaliduje, no i trzeba te wysokości dobrać doświadczalnie (ale to już chyba nie jest duży problem).

Seth

26.10.2004, 12:42:58

Dzieki

Michał Fikus

26.10.2004, 17:37:41

A ja zrobiłbym to inaczej.

a) TOP

musi mieć position: absolute; top: 0px; ... wiadomo. z-index: 10; (liczba przykladowa, byleby wieksza od containera)

CONTAINER (podobnie MENU)

height: 100%;
A co byłoby bardzo ważne i przynosiło porządany przez Ciebie efekt: padding-top: ilespx;
Podobnie z padding-bottom: ilespx; ew. z-index: 5; (mniej niż TOP)

c) FOOTER

I tu znowu Twoje position: absolute; z-index: 10;

Mam nadzieje, że choć krótko, to jednak zrozumiale.

Właściwie chyba nawet z-index nie będzie potrzebny, ale podaje, gdyż nie sprawdzałem tego rozwiązania, a jeśli bez nie zadziała, to z z-indexem powinno już być wszystko ok.

ikioloak

23.09.2005, 22:44:41

Spotkalem sie z bardzo podobna sytuacja i trafilem tutaj. Albo nie umiem sie posluzyc radami z powyzszych postow, albo one nie dzialaja. Zaczalem sie bawic w to troche z innej strony i skutek niemalze idealny.
Roznica taka nie na xhtml'u, wiec wszystko oparte na tabelkach. Tylko content pozostal div'em tak jak u Setha. Sprawe rozwiazalo cos mniej wiecej takiego:

[HTML] pobierz, plaintext 
<body onresize="javascript:document.getElementById('content').style.height=window.outerHeight-100; document.getElementById('content').style.width=window.outerWidth-200">
[HTML] pobierz, plaintext

Moze i nieladnie bo o onresize z tego co sie orientuje w3c nic nie mowi, ale wazne ze dziala. Acha, z tego co pamietam do doctype'a tez musialem wyrzucic bo z tym albo na IE albo na FF nie pradzilo.

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.