-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
do góry
Wakacje w Polsce, za granicą czy w domu?
