-
1. Data: 2010-07-25 22:11:22
Temat: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>
Witam,
Nie mogę odszukać wątku, w którym o tym było. Zapamiętałem z niego pewnie
szczątkowe informacje. Może ktoś z Was mnie naprowadzi.
Otóż zrobiłem w JS galerię, w której kliknięcie na obrazku powoduje, że
absolutny DIV o W i H = 100% wyszarza to co jest pod nim a w nim rysuje się
powiększona wersja klikniętego obrazka. Problem w tym, że jeśli strona jest
krótka (niższa niż okno przeglądarki), to DIV wyszarza kawałek okna
przeglądarki - tam gdzie sięga <body>. Sugerowano w tamtym wątku
zastosować:
html, body {position: relative; min-height:100%; ...}
Okazuje się, że to nic nie daje. Body nadal kończy się w połowie strony. O
czym zapomniałem?
-
2. Data: 2010-07-25 22:16:51
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: porneL <n...@p...net>
On Sun, 25 Jul 2010 23:11:22 +0100, Marek <b...@e...com> wrote:
> Nie mogę odszukać wątku, w którym o tym było. Zapamiętałem z niego pewnie
> szczątkowe informacje. Może ktoś z Was mnie naprowadzi.
Generalnie rzecz biorąc nie możesz bez spowodowania setki efektów
ubocznych i niekompatybilności, które będą cię potem prześladowały.
Polecam ustawić stały min-height dla treści (nie będzie równo z dołem
ekranu, ale wystarczy, żeby strona nie wyglądała głupio na podstronach z
małą ilością tekstu).
--
http://pornel.net
this.author = new Geek("porneL");
-
3. Data: 2010-07-26 12:17:23
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>
Dnia Sun, 25 Jul 2010 23:16:51 +0100, porneL napisał(a):
> Generalnie rzecz biorąc nie możesz bez spowodowania setki efektów
> ubocznych i niekompatybilności, które będą cię potem prześladowały.
Hmmm, może miałem zwidy. Wydawało mi się, że udało się to rozwiązać
zręcznie. W tym celu trzeba było zastosować position:relative dla <body> i
dla <html> i coś jeszcze w CSS zrobić.
Nie analizowałem jak to inni robią. Czasem widuje się strony z jakimiś
wkurzającymi animacjami dużego zdjęcia gdy małe się kliknie. Zazwyczaj tło
całej strony wtedy jest przyciemniane a fotka pojawia się nad tym
przyciemnieniem. Zakładam, że to jakiś DIV o W=H=100% wymiarów okna. Czy
rozciągnięcie DIV'a odbywa się jakimiś sztuczkami w JS a nie za pomocą CSS?
Przypatrywałeś się kiedyś temu?
> Polecam ustawić stały min-height dla treści (nie będzie równo z dołem
> ekranu, ale wystarczy, żeby strona nie wyglądała głupio na podstronach z
> małą ilością tekstu).
Masz na myśli blok, który nie ma position:relative czyli dedykowany jest
treści? Pytam bo na body min-height nie robi żadnego wrażenia.
-
4. Data: 2010-07-26 12:35:21
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>
W miedzyczasie metodą prób i błędów (coś w stylu "zapukaj 5x w rynnę a może
to coś pomoże") znalazłem rozwiązanie.
html {position: relative; height:100%; ...}
body {position: relative; min-height: 100%; ... }
Przy <html> musi być height a nie min-height. Co sądzisz o tym? Czy w
przypadku stron krótszych i dłuższych niż wielkość okna to powinno działać?
-
5. Data: 2010-07-26 13:17:49
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: sim_co <s...@g...pl>
Marek pisze:
> W miedzyczasie metodą prób i błędów (coś w stylu "zapukaj 5x w rynnę a może
> to coś pomoże") znalazłem rozwiązanie.
>
> html {position: relative; height:100%; ...}
> body {position: relative; min-height: 100%; ... }
>
> Przy <html> musi być height a nie min-height. Co sądzisz o tym? Czy w
> przypadku stron krótszych i dłuższych niż wielkość okna to powinno działać?
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.
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%;
}
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.
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 każdym razie już dawno nie spotkałem się z taką konstrukcją, a w sumie
zawodowo się tym zajmuje.
-
6. Data: 2010-07-26 16:16:43
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>
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ś :-)
> 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.
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?
> 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.
> W każdym razie już dawno nie spotkałem się z taką konstrukcją, a w sumie
> zawodowo się tym zajmuje.
To jak rozwiązałbyś w/w? Zaproponowana przez Ciebie konstrukacja jest
bardzo podobna do tego co i ja uczyniłem:
Twoje:
html,body,#glowny_kontener {
position:relative;
height:auto !important;
min-height: 100%;
height:100%;
}
Moje:
html {
position:relative;
height:100%;
}
body {
position:relative;
min-height: 100%;
}
#glowny_kontener - nie musi być ostylowany w wysokości i pozycjonowanie.
Samo <html> i <body> załatwia sprawę. Tak wynika z paru prób jakie
dokonałem przed momentem.
-
7. Data: 2010-07-26 19:45:02
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: porneL <n...@p...net>
On Mon, 26 Jul 2010 13:35:21 +0100, Marek <b...@e...com> wrote:
> W miedzyczasie metodą prób i błędów (coś w stylu "zapukaj 5x w rynnę a
> może
> to coś pomoże") znalazłem rozwiązanie.
>
> html {position: relative; height:100%; ...}
> body {position: relative; min-height: 100%; ... }
>
> Przy <html> musi być height a nie min-height. Co sądzisz o tym? Czy w
> przypadku stron krótszych i dłuższych niż wielkość okna to powinno
> działać?
To nie powinno działać:
> If the height of the containing block is not specified explicitly (i.e.,
> it depends on content height),***and this element is not absolutely
> positioned***, the percentage value is treated as '0' (for 'min-height')
> or 'none' (for 'max-height').
http://www.w3.org/TR/CSS2/visudet.html#min-max-heigh
ts
--
http://pornel.net
this.author = new Geek("porneL");
-
8. Data: 2010-07-26 20:14:44
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>
Dnia Mon, 26 Jul 2010 20:45:02 +0100, porneL napisał(a):
> On Mon, 26 Jul 2010 13:35:21 +0100, Marek <b...@e...com> wrote:
>
>> W miedzyczasie metodą prób i błędów (coś w stylu "zapukaj 5x w rynnę a
>> może
>> to coś pomoże") znalazłem rozwiązanie.
>>
>> html {position: relative; height:100%; ...}
>> body {position: relative; min-height: 100%; ... }
>>
>> Przy <html> musi być height a nie min-height. Co sądzisz o tym? Czy w
>> przypadku stron krótszych i dłuższych niż wielkość okna to powinno
>> działać?
>
> To nie powinno działać:
>
>> If the height of the containing block is not specified explicitly (i.e.,
>> it depends on content height),***and this element is not absolutely
>> positioned***, the percentage value is treated as '0' (for 'min-height')
>> or 'none' (for 'max-height').
>
> http://www.w3.org/TR/CSS2/visudet.html#min-max-heigh
ts
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.
-
9. Data: 2010-07-26 22:07:31
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: porneL <n...@p...net>
On Mon, 26 Jul 2010 21:14:44 +0100, Marek <b...@e...com> wrote:
>> To nie powinno działać:
>>
>>> If the height of the containing block is not specified explicitly
>>> (i.e., it depends on content height),***and this element is not
>>> absolutely
>>> positioned***, the percentage value is treated as '0' (for
>>> 'min-height') or 'none' (for 'max-height').
>>
>> http://www.w3.org/TR/CSS2/visudet.html#min-max-heigh
ts
>
> 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.
Gdzie jest okno przeglądarki na drukowanej stronie? Na przeglądarkach
mobilnych? (np. większość lightboxów jest absolutnie bezużyteczna na
iPhone, bo zakładają, że cała powierzchnia strony jest widoczna na raz i
uparcie "centrują" się poza ekranem).
--
http://pornel.net
this.author = new Geek("porneL");
-
10. Data: 2010-07-27 09:15:32
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com>
Dnia Mon, 26 Jul 2010 23:07:31 +0100, porneL napisał(a):
> On Mon, 26 Jul 2010 21:14:44 +0100, Marek <b...@e...com> wrote:
> Gdzie jest okno przeglądarki na drukowanej stronie?
Hmmm ... to dość proste do zdefiniowania: poprostu na całej zadrukowanej
powierzchni. Na nośnikach o nieskończonych wymiarach "okna" można przecież
przyjąć, że granicę wyznaczają wymiary dokumentu.
A tak na marginesie i tak już realizuje się tą ideę. Ustaw sobie <html> i
<body> na 100% wysokości, dla <body> ustaw tło i wydrukuj wraz z tłem
dokument. Zobacz co się stanie. Działa to intuicyjnie. Dzlaczego więc <div>
wewnątrz <body> ma być dyskryminowany? Nie może działać tak samo? Zgodzisz
się ze mną?
> Na przeglądarkach
> mobilnych? (np. większość lightboxów jest absolutnie bezużyteczna na
> iPhone, bo zakładają, że cała powierzchnia strony jest widoczna na raz i
> uparcie "centrują" się poza ekranem).
To akurat problem programistów. Pozycjonowanie dla tego typu galerii
wykonuję w JS, który bada najpierw wymiary okna. Tymczasem banalne tło,
które ma pokryć treść lub całe okno przeglądarki - w zależności od tego co
jest wyższe, to chyba nie jest nic tak niedorzecznego aby nie uwzględniać w
CSS z poszanowaniem założeń j/w dla nośników nieskończonych.
do góry
Augustowska Vita na wrocławskich Maślicach w sprzedaży
