nicht angemeldet
Seltsamer CSS-Bug: height: 100%; funktioniert nicht ordentlich
Hi!
Bin beim Designen auf einen seltsamen Bug gestoßen. Um auf unserer Stufenhomepage eine zentrierte Div-Box mit Schatten am Rand zu realisieren habe ich die Schatten jeweils als Hintergrundbild in zwei weitere Divcontainer gepackt, dann alles floaten lassen und sieht wunderbar aus in IE, FireFox, Opera und Safari. Leider gibt es in allen vier Browsern ein Problem wenn das Browserfenster nicht groß genug ist und man scrollen muss bzw. kann. Scrollt man nun runter hören alle grafischen Elemente der Divcontainer einfach auf. Nur der Text wird noch bis unten hin angezeigt, muss ja so sein.
Wenn man unten bleibt und die Höhe des Browsers an der oberen Kante des Browserfensters verändert, verändert sich die Länge der grafischen Elemente entsprechend. Deren vertikale Länge entspricht nämlich genau der Höhe des Anzeigebereichs des Browserfensters.
In der CSS-Datei habe ich überall height: 100%; stehen. Aber das müsste sich ja eigentlich auf die Höhe des Inhalts der Seite beziehen, nicht auf die Höhe des Anzeigebereichs. Ist das ein Bug oder habe ich da was falsch programmiert, da es ja in allen vier Browsern genau gleich auftritt.
Falls jemand selbst ausprobieren möchte habe ich hier eine Stand-Alone Version: http://powl.dyndns.org/stufenhp.rar
lg Paul Hamacher
-
Hi,
In der CSS-Datei habe ich überall height: 100%; stehen. Aber das müsste sich ja eigentlich auf die Höhe des Inhalts der Seite beziehen,
Noe.
nicht auf die Höhe des Anzeigebereichs.
Doch.
http://www.w3.org/TR/CSS21/visudet.html#the-height-property:
"A percentage height on the root element is relative to the initial containing block."Und wenn das root-Element, also HTML, 100% der Viewporthoehe hoch ist, dann beziehen sich die 100% nachfolgender Elemente natuerlich auch darauf.
MfG ChrisB
-
Hi, ok danke. Davon bin ich wirklich nicht ausgegangen. Allerdings habe ich es bisher noch nicht geschafft eine Box auf den kompletten Anzeigebereich zu strecken wenn nicht width: 100%; in html drin steht :-(
Geht das denn?
Ich möchte quasi drei Spalten mit insgesamt 800px Breite von ganz oben bis ganz unten duruchgängig haben wobei die Spalten links und rechts die Hintergrundbilder für den Schatten fassen.
lg Paul Hamacher
-