CSS - jak ustawić wysokość body na 100% ? - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS - jak ustawić wysokość body na 100% ?

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 19

11. Data: 2010-07-27 09:19:56
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: sim_co <s...@g...pl>

Marek pisze:
> Dnia Mon, 26 Jul 2010 15:17:49 +0200, sim_co napisał(a):
>
> Hej,
>
>> Uwierz na słowo, że bawienie się ze 100% wysokości minimalną jest dość
>> irytujące. Ja parę lat temu to zarzuciłem i po prostu ustawiam
>> min-height dla kontenera z 'treścią' strony.
>
> Może nieco myśl rozwinąć? Coś źle interpretuję bo widzę w w/w sprzeczność.
> Z jednej strony piszesz, że zarzuciłeś bawienie się ze 100% wysokością a
> potem piszesz, że min-height ustawiasz dla kontenera - czyli w domyśle 100%
> wysokość. Więc jednak nie zarzuciłeś :-)

Więc zarzuciłem - taką konstrukcję stosowałem parę lat temu. Zmień
'ustawiam' na 'ustawiałem' :)

>> Na to co chcesz uzyskać jest następujący sposób:
>>
>> html,body,#glowny_kontener {
>> position:relative;
>> height:auto !important;
>> min-height: 100%;
>> height:100%;
>> }
>
> Ten "mój" sposób funkcjonuje choć nie wiem czy nie jest absurdalny. Z
> jednej strony definiuję (i Ty również), że height:100% dla <html> co
> narzuca wysokość okna elementowi (a nie wysokość dokumentu, który może być
> w końcu wyższy niż 100% okna przeglądarki) a z drugiej pozwalam na
> rozciąganie <body> poprzez min-height:100%, co nie powinno pozwolić i tak
> rozciągnąć go poza ograniczony do 100% obszar <html>. Prawda? Tworzy się
> absurd ... ale działa.

Absurd wynika z różnorodności w interpretowaniu css-a przez
przeglądarki. Być może w tym momencie można stosować mniej 'absurdalne'
konstrukcje - kiedy ja stosowałem, to były czasy IE6, IE7, FF 1.5, Opery 8

> A co to za konstrukcja używająca 2x height? Jaki ma cel łączenie height i
> min-height? Czy mimo, że height jest ustawione na 100% to min-height
> pozwala aby height mogło być wyższe niż zadeklarowane?

To taka konstrukcja, która powoduje, żeby np w IE6 wyglądało tak jak
sobie życzysz.

IE6 niepoprawnie interpretuje min-height, a właściwie nie interpretuje.
Żeby mieć element na 100% wysokości musisz dać dla IE6 height:100% -
mimo 'sztywnej' wysokości IE6 rozszerzy kontener wraz z ilością
kontentu. Z kolei FF, O przy sztywnej wysokości nie rozszerzy kontenera
i dlatego potrzeba dać height:auto !important - żeby nadpisało sztywne
'height' i min-height:100%; żeby ustawiło minimalną wysokość na 100%.

>> Możesz to rozbić na 2 arkusze styli - w głównym dajesz min-height, a dla
>> ie6, ie7 dajesz height - ie8 z tego co wiem poprawnie interpretuje
>> min-height.
>
> Tak, poprawnie.
>
>> Irytacja zaczyna się w momencie kiedy stopkę masz zpozycjonowaną
>> absolutnie na dole głównego kontenera. Wiem, że pod IE6 i IE7 były
>> czasem takie jaja, że stopka, mimo że miała
>> {position:absolute;bottom:0;}, to 'zatrzymywała się' gdzieś po środku.
>> Nie znalazłem rozwiązania tego. Można pewnie js-em po załadowaniu strony
>> jeszcze raz dać mu bottom:0 ...
>
> W projekcie o jakim wspominam nie stosuję stopki więc mam większą swobodę w
> doborze atrybutów CSS. Zależy mi tylko aby móc absolutnie spozycjonowany
> DIV rozciągnąć na 100% powierzchni dokumentu jaśli jest wyższy od okna lub
> 100% powierzchni okna, jeśli dokument jest niższy. Ten DIV ma za zadanie
> przyciemnić treść pod nim. Nie może wystąpić żaden margines pomiędzy dołem
> dokumentu a dolną krawędzią okna przeglądarki (dla krótszych dokumentów).
>
> Wyjaśniłem powtórnie aby być dobrze zrozumianym.

Hmm pewnie nie do końca zastanowiłem się nad problemem :)

Ja w takim wypadku jak Twój użył bym jQuery. Nadał onclicki dla
wszystkich linków z powiększeniem i tworzył div-a absolutnego z nadanymi
width i height - chyba $(window).height() zwraca wysokość widzialnego
pola przeglądarki, a $("body").height() powinno zwrócić wysokość
dokumentu. Sprawdzasz co przyjmuje większą wartość i taką nadajesz
elementowi z alphą. Pozostaje tylko stworzenie jeszcze elementu img z
powiększeniem i wyliczenie jego pozycji na podstawie jego wymiarów i
$(window).height(), $(window).width() żeby wycentrować.

[ pokaż wiadomość z nagłówkami ]

do góry
12. Data: 2010-07-27 09:44:40
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Paweł Piskorz <n...@p...nie?>

On 2010-07-26 22:14, Marek wrote:
> Pech. Faktycznie. Więc "działanie" to skutek ułomnosci przeglądarek. Swoją
> drogą to bardzo dziwny problem, że nie przewidziano możliwości "legalnego"
> narysowania DIV'a o W=H=100% wielkości okna przeglądarki.

position:fixed; top:0; right:0; bottom:0; left:0;

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

[ pokaż wiadomość z nagłówkami ]

do góry
13. Data: 2010-07-27 18:07:49
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>

Dnia Tue, 27 Jul 2010 11:19:56 +0200, sim_co napisał(a):

> Ja w takim wypadku jak Twój użył bym jQuery. Nadał onclicki dla
> wszystkich linków z powiększeniem i tworzył div-a absolutnego z nadanymi
> width i height - chyba $(window).height() zwraca wysokość widzialnego
> pola przeglądarki, a $("body").height() powinno zwrócić wysokość
> dokumentu. Sprawdzasz co przyjmuje większą wartość i taką nadajesz
> elementowi z alphą. Pozostaje tylko stworzenie jeszcze elementu img z
> powiększeniem i wyliczenie jego pozycji na podstawie jego wymiarów i
> $(window).height(), $(window).width() żeby wycentrować.

Mniej więcej tak robię teraz z wyjątkkiem samego tła. Założyłem błędnie, że
CSS jest od tego aby rozciągnąć DIV'a w pionie i w poziomie na 100%. Jeśli
się nie da, to trudno, przerzucę również i to zadanie na JS.

Dzięki za podpowiedź :-)

[ pokaż wiadomość z nagłówkami ]

do góry
14. Data: 2010-07-27 18:13:48
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>

Dnia Tue, 27 Jul 2010 11:44:40 +0200, Paweł Piskorz napisał(a):

> On 2010-07-26 22:14, Marek wrote:
>> Pech. Faktycznie. Więc "działanie" to skutek ułomnosci przeglądarek. Swoją
>> drogą to bardzo dziwny problem, że nie przewidziano możliwości "legalnego"
>> narysowania DIV'a o W=H=100% wielkości okna przeglądarki.
>
> position:fixed; top:0; right:0; bottom:0; left:0;

Wooow! Dzięki! :-)

[ pokaż wiadomość z nagłówkami ]

do góry
15. Data: 2010-07-28 07:30:53
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>

P.S.
Zerknij na to co zasugerował mi Paweł. Czy jest to poprawne rozwiązanie pod
względem zgodności z CSS?

Wspominałeś o nośnikach typu wydruk (nieograniczony wymiar "okna"). W jaki
sposób taka definicja DIV'a będzie traktowana na tych nośnikach?

[ pokaż wiadomość z nagłówkami ]

do góry
16. Data: 2010-07-28 07:33:40
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: sim_co <s...@g...pl>

Marek pisze:
> Mniej więcej tak robię teraz z wyjątkkiem samego tła. Założyłem błędnie, że
> CSS jest od tego aby rozciągnąć DIV'a w pionie i w poziomie na 100%. Jeśli
> się nie da, to trudno, przerzucę również i to zadanie na JS.
>
> Dzięki za podpowiedź :-)

Myślę, że nie ma co się krępować przy częściowym ostylowaniu takich
elementów dokumentu. W sumie są tworzone tylko i wyłącznie przy jakiejś
tam akcji usera i później usuwane. Ja nadaje wymiary, ustawiam też np
'opacity', bo wiadomo, że dla starszych IE potrzebny jest
'filter:alpha(...)', a tutaj jQuery bierze na siebie ten problem.

Pozdrawiam :)

[ pokaż wiadomość z nagłówkami ]

do góry
17. Data: 2010-07-28 07:38:59
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: sim_co <s...@g...pl>

Marek pisze:
> Dnia Tue, 27 Jul 2010 11:44:40 +0200, Paweł Piskorz napisał(a):
>
>> On 2010-07-26 22:14, Marek wrote:
>>> Pech. Faktycznie. Więc "działanie" to skutek ułomnosci przeglądarek. Swoją
>>> drogą to bardzo dziwny problem, że nie przewidziano możliwości "legalnego"
>>> narysowania DIV'a o W=H=100% wielkości okna przeglądarki.
>> position:fixed; top:0; right:0; bottom:0; left:0;
>
> Wooow! Dzięki! :-)

Działa jak olejesz IE6... IE7 z tego co wiem, też ma jakiś z tym problem

http://www.quirksmode.org/css/contents.html#t28

[ pokaż wiadomość z nagłówkami ]

do góry
18. Data: 2010-07-28 11:34:59
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>

Dnia Wed, 28 Jul 2010 09:38:59 +0200, sim_co napisał(a):

>
> Działa jak olejesz IE6... IE7 z tego co wiem, też ma jakiś z tym problem
>
> http://www.quirksmode.org/css/contents.html#t28

Chyba tak właśnie postąpię. IE9 jest już prawie opublikowany. Aktualizacje
są darmowe. Jeśli ktoś decyduje się na stosowanie archaicznych przeglądarek
to powinien liczyć się z tym, że coraz mniej stron będzie poprawnie
widział.

[ pokaż wiadomość z nagłówkami ]

do góry
19. Data: 2010-07-28 13:56:24
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: sim_co <s...@g...pl>

Marek pisze:
> Chyba tak właśnie postąpię. IE9 jest już prawie opublikowany. Aktualizacje
> są darmowe. Jeśli ktoś decyduje się na stosowanie archaicznych przeglądarek
> to powinien liczyć się z tym, że coraz mniej stron będzie poprawnie
> widział.

Schyłek IE6 na szczęście już widać - wg ranking.pl 4,25% userów jeszcze
z tej wersji 'misia' korzysta.

Generalnie to chyba korporacje, dla których 'przesiadka' na coś nowszego
/ innego stanowi dla adminów ciężką kwestię.

[ pokaż wiadomość z nagłówkami ]

do góry