Witam,

Mamy następujący uproszczony układ:

<jakiselement styl="position:relative; height: 100%">
<div id="header"></div>
<div id="content"></div>
</jakiselement>

Header zajmuje np. 400px wysokości. Chciałbym aby content zajmował całą
resztę wysokości okna przeglądarki i rozciągał się jeszcze bardziej gdy
zawartość tego DIVa wymusi większą wysokość. Zdefiniowałem height: 100%
lecz wtedy wysokość wynosi 100% wysokości przeglądarki plus 400px. Tak więc
ja chciałbym 100% minus 400px. Jak to osiągnąć?

do góry

Dnia Mon, 21 Mar 2011 13:58:48 +0100, Marek napisał(a):

> Header zajmuje np. 400px wysokości. Chciałbym aby content zajmował całą
> resztę wysokości okna przeglądarki i rozciągał się jeszcze bardziej gdy
> zawartość tego DIVa wymusi większą wysokość. Zdefiniowałem height: 100%
> lecz wtedy wysokość wynosi 100% wysokości przeglądarki plus 400px. Tak więc
> ja chciałbym 100% minus 400px. Jak to osiągnąć?

A naprzykład tak: http://pastebin.com/mE3p4icU
(IE6 i 7 pomijam)

--
Tomek
http://www.advstar.com

do góry

Dnia Mon, 21 Mar 2011 19:01:46 +0100, Tomasz Sowa napisał(a):

> A naprzykład tak: http://pastebin.com/mE3p4icU
> (IE6 i 7 pomijam)

Sprytne - tabelę poziom wyżej przeniosłeś a header stał się pustym wierszem
tabeli. :-)
No dobrze - mimo iż temat rozwiązany nadal ciekawi mnie na czym polega
wyższość znacznika body nad innymi? Dlaczego tabela w body zachowuje się
inaczej niż w div nawet jeśli div jest typu block?

do góry

W dniu 2011-03-21 19:01, Tomasz Sowa pisze:
> Dnia Mon, 21 Mar 2011 13:58:48 +0100, Marek napisał(a):
>
>> Header zajmuje np. 400px wysokości. Chciałbym aby content zajmował całą
>> resztę wysokości okna przeglądarki i rozciągał się jeszcze bardziej gdy
>> zawartość tego DIVa wymusi większą wysokość. Zdefiniowałem height: 100%
>> lecz wtedy wysokość wynosi 100% wysokości przeglądarki plus 400px. Tak więc
>> ja chciałbym 100% minus 400px. Jak to osiągnąć?
>
> A naprzykład tak: http://pastebin.com/mE3p4icU
> (IE6 i 7 pomijam)


Jeśli chodzi o IE6 i 7 możesz zainteresować się wstawkami JSowymi do
CSSa:) i też pójdzie.

do góry