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-26 16:16:43
Temat: Re: CSS - jak ustawić wysokość body na 100% ?
Od: Marek <b...@e...com> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
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.