height 100% a doctype - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › height 100% a doctype

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 8

1. Data: 2009-03-07 13:03:47
Temat: height 100% a doctype
Od: Zbyszek Malec <z...@t...pl>

Mam taki html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
</head>
<body style="background:black;height:100%;">
<div style="background:white;height:100%;">
bla
</div>
</body>
</html>

wg walidatora jest to poprawny HTML 4.01 strict.
Efekt oczekiwany: cała strona jest biała (no, z czarną obramówką)
Efekt uzyskany: cała strona jest czarna, i tylko linijka z "bla" jest
biała

Jak usunę deklarację DOCTYPE to wygląda to zgodnie z oczekiwaniem, ale to
oczywiście nie jest rozwiązanie ;)

O ile się orientuję, to ustawienie w body height:100% powinno dać punkt
odniesienia dla tego diva z "bla" i jego height:100% powinien objąć całego
rodzica. Mylę się?

--
Zbyszek Malec
gg 2756100

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2009-03-07 13:11:56
Temat: Re: height 100% a doctype
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

marzec roku pamiętnego 2009, prawdopodobnie 07. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Zbyszek Malec:

> O ile się orientuję, to ustawienie w body height:100% powinno dać
> punkt odniesienia dla tego diva z "bla" i jego height:100% powinien
> objąć całego rodzica. Mylę się?

<body> też ma rodzica, jest nim <html>. Po nadaniu mu height:100%
uzyskasz oczekiwany efekt.

(Czarną ramkę usuniesz usuwając wartości domyślne nadawane niektórym
elementom przez przeglądarkę.)
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2009-03-07 13:16:41
Temat: Re: height 100% a doctype
Od: Zbyszek Malec <z...@t...pl>

Dnia Sat, 7 Mar 2009 14:11:56 +0100, Mirosław Zalewski napisał(a):

> <body> też ma rodzica, jest nim <html>. Po nadaniu mu height:100%
> uzyskasz oczekiwany efekt.

Rzeczywiście, działa. Dzięki!

> (Czarną ramkę usuniesz usuwając wartości domyślne nadawane niektórym
> elementom przez przeglądarkę.)

A to akurat wiem, ale i tak dzięki za hinta.

--
Zbyszek Malec
gg 2756100

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2009-03-07 22:41:45
Temat: Re: height 100% a doctype
Od: Zbyszek Malec <z...@t...pl>

Dnia Sat, 7 Mar 2009 14:16:41 +0100, Zbyszek Malec napisał(a):

>> <body> też ma rodzica, jest nim <html>. Po nadaniu mu height:100%
>> uzyskasz oczekiwany efekt.
>
> Rzeczywiście, działa. Dzięki!

A jednak nie do końca jest dobrze. Taki kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
html {
background: black;
height: 100%;
}
</style>
<title></title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=UTF-8"/>
</head>
<body style="background: yellow; height:100%">
<div style="height: 100%">

<form action="" style="height: 100%">
<div style="height: 100%">
<textarea cols="80" rows="30"></textarea>
</div>
</form>
</div>
</body>
</html>

na pierwszy rzut oka wygląda dobrze, ale niepoprawnie zachowuje się to w
sytuacji, gdy zmniejszamy okienko poniżej rozmiaru textarea. Wtedy wystaje
ona na czarne tło (czyli element html), natomiast element żółty (body)
zaczyna się drastycznie kurczyć. Da się coś na to poradzić?

--
Zbyszek Malec
gg 2756100

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2009-03-07 23:16:11
Temat: Re: height 100% a doctype
Od: Zbyszek Malec <z...@t...pl>

Dnia Sat, 7 Mar 2009 23:41:45 +0100, Zbyszek Malec napisał(a):

> na pierwszy rzut oka wygląda dobrze, ale niepoprawnie zachowuje się to w
> sytuacji, gdy zmniejszamy okienko poniżej rozmiaru textarea. Wtedy wystaje
> ona na czarne tło (czyli element html), natomiast element żółty (body)
> zaczyna się drastycznie kurczyć. Da się coś na to poradzić?

Chyba sobie poradziłem. Dla potomnych:

wywalić styl dla <html>
dla body w stylu dodać "position: absolute".

--
Zbyszek Malec
gg 2756100

[ pokaż wiadomość z nagłówkami ]

do góry
6. Data: 2009-03-07 23:45:20
Temat: Re: height 100% a doctype
Od: Zbyszek Malec <z...@t...pl>

Dnia Sat, 7 Mar 2009 23:41:45 +0100, Zbyszek Malec napisał(a):

> na pierwszy rzut oka wygląda dobrze, ale niepoprawnie zachowuje się to w
> sytuacji, gdy zmniejszamy okienko poniżej rozmiaru textarea. Wtedy wystaje
> ona na czarne tło (czyli element html), natomiast element żółty (body)
> zaczyna się drastycznie kurczyć. Da się coś na to poradzić?

Ale to śmieszne jest. Wywalenie stylu dla elementu html, dodanie "position:
absolute" do body daje taki sam efekt. Niby jest ok, ale i tak element
"body" kurczy się szybciej niż jego zawartość, więc jak pojawia się pasek
przewijania, to stosony wymiar traci jakiekolwiek pozory sensowności.

--
Zbyszek Malec
gg 2756100

[ pokaż wiadomość z nagłówkami ]

do góry
7. Data: 2009-03-08 01:05:33
Temat: Re: height 100% a doctype
Od: Zbyszek Malec <z...@t...pl>

Dnia Sun, 8 Mar 2009 00:45:20 +0100, Zbyszek Malec napisał(a):

> Ale to śmieszne jest. Wywalenie stylu dla elementu html, dodanie "position:
> absolute" do body daje taki sam efekt. Niby jest ok, ale i tak element
> "body" kurczy się szybciej niż jego zawartość, więc jak pojawia się pasek
> przewijania, to stosony wymiar traci jakiekolwiek pozory sensowności.

Dalsza relacja z placu boju. Wychodzi na to, że width i height w procentach
odnoszą się do viewportu, czyli faktycznego rozmiaru okna przeglądarki.
Stąd też wyjeżdżanie elementów podrzędnych ponad nadrzędne.
Idąc dalej tym tropem, wpadłem na pomysł, żeby połączyć height i
min-height.

min-width: 100%;
width: auto;

daje poprawne rezultaty w poziomie (rozciąga na długość i nie wyjeżdża nic
poza body)

min-height: 100%
height: auto;

daje połowiczny sukces (nie wyjeżdża nic, ale się nie rozciąga, ponadto na
dole zostaje pasek - w tym momencie się załamałem).

Zostaje jeszcze sprawdzić display:table i pierdyliard divów do tego oraz
odpowiedniej wielkości obrazek.

Beznadzieja. Jak człowiek nie zna narzędzia, to mu się wydaje, że proste
rzeczy da się zrobić w prosty sposób. Im głębiej wchodzę w tego CSSa tym
mniej mi się on podoba (a myślałem, że to będzie miłość od pierwszego
wejrzenia). Dobranoc.

--
Zbyszek Malec
gg 2756100

[ pokaż wiadomość z nagłówkami ]

do góry
8. Data: 2009-03-08 01:09:06
Temat: Re: height 100% a doctype
Od: Zbyszek Malec <z...@t...pl>

Dnia Sun, 8 Mar 2009 02:05:33 +0100, Zbyszek Malec napisał(a):

> min-width: 100%;
> width: auto;
>
> daje poprawne rezultaty w poziomie (rozciąga na długość i nie wyjeżdża nic
> poza body)

Oczywiście nie działa pod IE.

--
Zbyszek Malec
gg 2756100

[ pokaż wiadomość z nagłówkami ]

do góry