Re: 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% ? › Re: CSS - jak ustawić wysokość body na 100% ?

Data: 2010-07-27 09:19:56
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: sim_co <s...@g...pl> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
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ć.