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.icm.edu.pl!not-for-mail
From: Marek <b...@e...com>
Newsgroups: pl.comp.www
Subject: Re: CSS - jak ustawić wysokość body na 100% ?
Date: Mon, 26 Jul 2010 18:16:43 +0200
Organization: Dzial Sieciowy ICM, Uniwersytet Warszawski
Lines: 83
Message-ID: <1683njfkzmr72$.xycgp9s512x.dlg@40tude.net>
References: <1mdx9l95h9prv$.sm8rry75vx1d.dlg@40tude.net>
<o...@a...local>
<c...@4...net>
<4wf72r7v0w1t$.l3nh6m3lrscq$.dlg@40tude.net>
<i2k1u0$hd7$1@inews.gazeta.pl>
NNTP-Posting-Host: chello087207027155.chello.pl
Mime-Version: 1.0
Content-Type: text/plain; charset="iso-8859-2"
Content-Transfer-Encoding: 8bit
X-Trace: news.net.icm.edu.pl 1280161006 26016 87.207.27.155 (26 Jul 2010 16:16:46
GMT)
X-Complaints-To: u...@n...net.icm.edu.pl
NNTP-Posting-Date: Mon, 26 Jul 2010 16:16:46 +0000 (UTC)
User-Agent: 40tude_Dialog/2.0.15.1pl
Xref: news-archive.icm.edu.pl pl.comp.www:396341
[ ukryj 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.