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% ?

Path: news-archive.icm.edu.pl!news.gazeta.pl!not-for-mail
From: sim_co <s...@g...pl>
Newsgroups: pl.comp.www
Subject: Re: CSS - jak ustawić wysokość body na 100% ?
Date: Tue, 27 Jul 2010 11:19:56 +0200
Organization: "Portal Gazeta.pl -> http://www.gazeta.pl"
Lines: 90
Message-ID: <i2m8c1$suh$1@inews.gazeta.pl>
References: <1mdx9l95h9prv$.sm8rry75vx1d.dlg@40tude.net>
<o...@a...local>
<c...@4...net>
<4wf72r7v0w1t$.l3nh6m3lrscq$.dlg@40tude.net>
<i2k1u0$hd7$1@inews.gazeta.pl>
<1683njfkzmr72$.xycgp9s512x.dlg@40tude.net>
NNTP-Posting-Host: 95.50.13.10
Mime-Version: 1.0
Content-Type: text/plain; charset=ISO-8859-2; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: inews.gazeta.pl 1280222401 29649 95.50.13.10 (27 Jul 2010 09:20:01 GMT)
X-Complaints-To: u...@a...pl
NNTP-Posting-Date: Tue, 27 Jul 2010 09:20:01 +0000 (UTC)
X-User: sim_co
In-Reply-To: <1683njfkzmr72$.xycgp9s512x.dlg@40tude.net>
User-Agent: Thunderbird 2.0.0.24 (Windows/20100228)
Xref: news-archive.icm.edu.pl pl.comp.www:396349
[ ukryj 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ć.