[CSS] Rozciąganie warstw

[ybamor]

Witam,
Niestety mimo wielu prób i przeczytania dziesiątek artykułów w sieci nie udało mi się uzyskać pożądanego efektu przy tworzeniu prostego szablonu pod stronę www.
Nie jest to typowy szablon (choć nie jest też zapewne zbytnio wysublimowany), lecz sądzę, że mimo wszystko możliwe jest uzyskanie takiego efektu bez użycia dodatkowych wspomagaczy.
Do rzeczy...
Chciałbym uzyskać stronę o statycznej szerokości (dla mniejszych rozdzielczości ekranu niż ta szerokość liczę się z dodatkowym scrollem u dołu ekranu) oraz wysokości zmiennej w zależności od rozdzielczości użytkownika (ale nie mniejszej niż jakaś tam stała wartość).
W praktyce wyglądać winno to tak jak na obrazku:

I teraz minimalna wysokość okienka użytkownika (tzn. przy mniejszej liczę się z pojawieniem się dodatkowego scrolla po prawej stronie ekranu) to suma wysokości pola zielonego, niebieskiego i błękitnego + miminalna wysokość pola czerwonego (też jakaś stała wartość).
I teraz gdy użytkownik ma wyższą rozdzielczość (czyt. wielkość okna przeglądarki), to w poziomie nic się nie zmienia, ale w pionie rozciąga się czerwony i żółty div.
Paski przewijania przy żółtym i czerwonym divie są w ramach overflow: auto, czyli pojawiać się winny tylko wtedy gdy są potrzebne.
Czy uzyskanie takiego efektu jest w ogóle możliwe?
A jeśli tak, to jak do tego doprowadzić.

Generalnie udało mi się to zrobić (przy użyciu pozycjonowania absolutnego) dla jednego diva rozciągającego się na całą szerokość stałą, jednak gdy chce ustawić dwa divy obok siebie (float: right) całość przestaje funkcjonować jak należy.

Z góry dziękuję za odpowiedź i pozdrawiam
ybamor

[ixtab]

Musiałbyś ustalać wymiary każdego elementu procentowo. Co do mniejszych rozdzielczości wcale nie musisz godzić się z suwakiem poziomym, możesz użyć skryptu (js), który sprawdzi rozdzielczość użytkownika i jeśli będzie mniejsza niż nnnn x nnn - załadować inny arkusz styli.

[Kartofelek]

ja bym pewnie zrobił tak:

calosc + body + html 100% height + min-height:....
gora i dol clear + jakis height

i teraz zaleznie od tego co chcesz osiagnac:
A) jezeli stopka i header maja byc przyklejone do krawedzi:

gora - position:absolute; top:0 itp
dol: position:absolute; bottom:0;
srodek z divami : margin:wysokosc_gory auto auto wysokosc_dolu; height:100%; min-height:.....

niebieskie, czerwone w 1 div. zolty float right

B) jezeli dol i gora nie maja byc przyklejone
dol i gora dostaja clear;
srodkowy z divami dostaje min-height; clear:both i overflowa + position:relative dla lepszego ulozenia

[ybamor]

Dziękuję za szybką odpowiedź :-)
Jeszcze dzisiaj przetestuję i dam znać co mi z tego wyszło ;-)
Pozdrawiam
ybamor

[ybamor]

Udało się wszystko dokładnie tak jak chciałem, dzięki za pomoc.
Ostatecznie skorzystałem z pozycjonowania absolutnego do niemal wszystkich elementów i dodatkowo atrybutu min-height ;-)
Raz jeszcze dziękuję za pomoc i pozdrawiam
ybamor