nicht angemeldet
height:100% + strict
Hallo, ist height:100% für Block-Elemente nicht erlaubt?
Wenn ich den folgenden Layer mit height:100% festlege ist es kein Problem:
<div style="width:120px;height:100%;background-color:#ff0000;">
test
</div>
Füge ich jedoch im <DOCTYPE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ein, so wird die Höhe nur noch vom Inhalt bestimmt.
Nun heißt es doch
"Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'."
Aber <body> hat doch auch eine Höhe von 100%. Also müsste es doch funktionieren, oder?
Weiß jemand Rat?
Michi
-
Halli,
Nun heißt es doch
"Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'."
Aber <body> hat doch auch eine Höhe von 100%. Also müsste es doch funktionieren, oder?hast Du body explizit auf 100% gesetzt? Oder hoffst Du nur, daß es 100% Höhe hat?
Und hast Du html auch explizit auf 100% gesetzt? Oder hoffst Du nur, daß es 100% Höhe hat?cu,
Robert-
Ich habe <body> auf height:100% gesetzt und eine Hintergrundfarbe angegeben. Die hat auch das gesammte Browserfenster ausgefüllt, sodass ich davon ausgehe, dass <body> eine Höhe von 100% hat. Für <html> habe ich keine Höhe angegeben, das müsste ich heute nachmittag testen. (Habe hier keine Möglichkeit)
Michi
-
Ich habe <body> auf height:100% gesetzt und eine Hintergrundfarbe angegeben. Die hat auch das gesammte Browserfenster ausgefüllt, sodass ich davon ausgehe, dass <body> eine Höhe von 100% hat. Für <html> habe ich keine Höhe angegeben, das müsste ich heute nachmittag testen. (Habe hier keine Möglichkeit)
Michi
Hi,
ich hatte mal das gleiche Problem. Wenn ich mich recht erinnere, war es so:
1. Das Problem trat nur im Mozilla auf, nicht im IE
2. Es trat nur auf, wenn die DTD in der langen Version geschrieben wurde, also so wie du, die kurze Variante hat es behoben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
(hat nichts mit strict/transitional zu tun)3. <html style="height:100%"> löst das Problem in diesem Fall grundsätzlich, weil Mozilla die Gesamthöhe des html-Bereichs nicht als die Gesamthöhe des Browserfensters sieht (so wie IE) sondern nur als das, was tatsächlich gebraucht wird, um sämtliche Inhalte unterzunringen, in deinem Fall also nur eine Zeile mit etwas margin. Computerlogik eben - hat wie immer recht, auch wenn's doof erscheint.
Grüße,
Nils-
Hallo,
Computerlogik eben - hat wie immer recht, auch wenn's doof erscheint.
warum ist dann beim Mozilla die Hintergrundfarbe über den ganzen
Bereich vorhanden?Etwa eine Eigenschaft vorsorglicher overflow des Body, der dann
die bg-color erhält?Grüsse
Cxy23
-
warum ist dann beim Mozilla die Hintergrundfarbe über den ganzen
Bereich vorhanden?Etwa eine Eigenschaft vorsorglicher overflow des Body, der dann
die bg-color erhält?Hi,
wie meinst du? In dem Beispiel dieses threads ist das ja nicht der Fall - hast du Beispiel-code?
Grüße,
Nils-
Hallo,
wie meinst du? In dem Beispiel dieses threads ist das ja nicht der Fall - hast du Beispiel-code?
hatte ich vielleicht falsch verstanden.
Erstmal ein ähnliches Beispiel:
<style>
body{ background-color:silver}
#bt{position:absolute;bottom:0px;}
</style>
<body>
<div id=bt>xx</div>
<img src=xxx.gif width=2 height=2000>
</body>ohne zusätzliches Container Div oder height:auto 100% o.ä. landet
das Div am Window und nicht am body, trotzdem ist alles grau.Grüsse
Cyx23
-
Also ich habe es nun getestet.
Der IE 6 möchte height:100% im <body>-Tag haben und der
Mozilla im <html>-Tag. In beiden eingetragen funktioniert es nun mit dem IE ab 5.0, Opera ab 6.0, Netscape ab 6.0 und dem Mozilla ab Version 1.Gruß
Michi-
Hallo,
Also ich habe es nun getestet.
Der IE 6 möchte height:100% im <body>-Tag haben und der
Mozilla im <html>-Tag. In beiden eingetragen funktioniert es nun mit dem IE ab 5.0, Opera ab 6.0, Netscape ab 6.0 und dem Mozilla ab Version 1.ja, danke, interessant, ist wohl die ähnliche Wirkung wie mit einem
Containerdiv, aber es ist doch -Beispiel mit img und body- so dass
wenn bottom die Windowkante trifft, der Body nur so gross wie das
Window ist. Also wird das <img height=2000> als 'overflow visible'
angezeigt, sobald man aus dem Window scrollt.
Wenn aber Elemente normalerweise _nur_ bis zu ihrer Grösse, hier
gleich Window, Hintergrundfarbe haben, stimmt doch etwas nicht
wenn das ganze html die Farbe des Body bekommt.
Ähnliches kann man wohl auch bei der Abfrage der Grösse per
Script feststellen, etwa wenn der Body kleiner sein soll als
das Window, hatte ich auch schonmal probiert (schon länger her,
weiss d. Code nicht auswendig).
Jedenfalls hätte ich erwartet dass nur das Window die graue Farbe
des Body erhält, wenn es ganz genau zugeht.Grüsse
Cyx23
-
Hallo nochmal,
Also ich habe es nun getestet.
Der IE 6 möchte height:100% im <body>-Tag haben und derdu hast gesteted dass bei Doctype strict der Body beim
Window abgeschnitten wird, oder dass bottom tatsächlich
die 2000px trifft, oder meintest du gar nicht das Bsp.:body{ background-color:silver}
#bt{position:absolute;bottom:0px;}
</style>
<body>
<div id=bt>xx</div>
<img src=xxx.gif width=2 height=2000>
</body>sondern dein Ausgangsposting?
Grüsse
Cyx23
-
-
-
-
-
-
-
-
Halli,
Füge ich jedoch im <DOCTYPE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">ein, so wird die Höhe nur noch vom Inhalt bestimmt.
Nachtrag:
Welchen Browser benutzt Du?
Einen, der CSS einigermaßen korrekt umsetzt oder den IE?cu,
Robert-
Nachtrag:
Welchen Browser benutzt Du?
Einen, der CSS einigermaßen korrekt umsetzt oder den IE?Habe es mit IE 6, den Geckos und Opera 6
getestet. Bei allen gleich. Das Verhalten scheint also CSS-Standard zu sein.michi
-