nicht angemeldet
volle Höhe
Hallo,
wie erzwinge ich bei zwei floatenden div´s dynamisch die volle Höhe auch beim scrollen?
Zur Erklärung eine kleiner Code-Auszug:
HTML:
<div id="head"></div>
<div id="body">
<div id="content">viel Text der ein scrollen notwendig macht</div>
<div id="side" style="color:#FF000">weniger Text</div>
</div>
<div id="foot"></div>
CSS:
#body, #head, #foot {
position:static;
clear:both; }
#content, #side {
position:relative;
float:left;
height:100%;
overflow:visible;}
Ich möchte den roten Streifen des side-DIV´s längens der gesamten Seitenhöhe laufen lassen. Leider geht er bei IE nur bis zur Unterkante des ersten Bildschirmes, wenn man scrollt ist er weg. OP und Moz machen den Streifen nur so lange wie der Inhalt des side-DIV´s ist.
Paul
-
Hallo Paul,
das Verhalten von Mozilla und Opera ist wohl w3c-konformer als das des IE.
Vielleicht gibt es da einen "richtigen" Weg die Beziehungen zwischen body
und hier "side" so festzulegen dass sich 100% auf body als Elternelement
beziehen, ansonsten zeigt sich wieder einmal mehr dass es mit Tabellen ja
klappen würde, und dass der IE es wohl nicht w3c konform, aber "besser"
macht, notfalls #body{height:100%}, dann kommt man über das Fenster.Interessant: mit <img src=spacer.gif height=100% width=2px> im weniger-
Text-div erreicht mozilla immerhin das Fenster, aber vielleicht meldet
sich ja doch noch ein w3c-css-freak der weiss wie es eleganter geht?Grüsse
Cyx23
-
Hallo,
das Verhalten von Mozilla und Opera ist wohl w3c-konformer als das des IE.
wichtiger als w3c-Konformität ist mit im Anzeige-Konformität.
Vielleicht gibt es da einen "richtigen" Weg die Beziehungen zwischen body
und hier "side" so festzulegen dass sich 100% auf body als Elternelement
beziehen, ansonsten zeigt sich wieder einmal mehr dass es mit Tabellen ja
klappen würde, und dass der IE es wohl nicht w3c konform, aber "besser"
macht, notfalls #body{height:100%}, dann kommt man über das Fenster.Ich habe schon verscheidene Kombinationen von 'height:100%' oder 'height:auto;' in den DIV´s un alle zugehörigen parent-Elementen ausprobiert, ohne Erfolg.
Interessant: mit <img src=spacer.gif height=100% width=2px> im weniger-
Text-div erreicht mozilla immerhin das Fenster, aber vielleicht meldet
sich ja doch noch ein w3c-css-freak der weiss wie es eleganter geht?Das work-around ist mir dann doch etwas zu heftig.
Grüsse
Paul
-
Hallo Paul,
das Verhalten von Mozilla und Opera ist wohl w3c-konformer als das des IE.
wichtiger als w3c-Konformität ist mit im Anzeige-Konformität.
seh ich genauso, ich hatte nur gehofft dass einige der w3c-Spezialisten
hier eine in sich logische Erklärung formulieren könnten, evtl. sogar
Lösungen ableiten, was bei den konformeren Browsern abläuft.
Müsste ja in sich eigentlich konsequenter ablaufen als beim IE.
Vielleicht kann/muss man auch noch mit Ausrichtungen des Inhaltes arbeiten,
die ähnlich wirken wie das spacer.gif.Vielleicht gibt es da einen "richtigen" Weg die Beziehungen zwischen body
und hier "side" so festzulegen dass sich 100% auf body als Elternelement
beziehen, ansonsten zeigt sich wieder einmal mehr dass es mit Tabellen ja
klappen würde, und dass der IE es wohl nicht w3c konform, aber "besser"
macht, notfalls #body{height:100%}, dann kommt man über das Fenster.Ich habe schon verscheidene Kombinationen von 'height:100%' oder 'height:auto;' in den DIV´s un alle zugehörigen parent-Elementen ausprobiert, ohne Erfolg.
Das mit dem body klappte bei mir für IE6 um über die window-Kante zu kommen,
auch mit deinem Beispiel hier.
Hast du andere IE getestet oder einen bestimten doctype eingetragen?Interessant: mit <img src=spacer.gif height=100% width=2px> im weniger-
Text-div erreicht mozilla immerhin das Fenster, aber vielleicht meldet
sich ja doch noch ein w3c-css-freak der weiss wie es eleganter geht?Das work-around ist mir dann doch etwas zu heftig.
Einige "übliche" CSS-Konstruktionen halte ich für heftiger, ein spacer.gif
ist zwar verpönt, aber m.E. doch berechenbarer, auch hinsichtlich
zukünftiger Browser, als oft empfohlene CSS-Browserweichen. Leider komme
bislang damit nur auf Windowgrösse. Bei z.B. #side{padding-top:100%;} stimmt
übrigens der Bezug der 100% auf den body beim Mozilla.1.1 (nützt aber
nichts, da man clip nicht auf #side anwenden kann), warum da height nicht
funktioniert.
Sonst müste man #side absolut positionieren, dann ginge es wohl besser,
notfalls dann auch per clip.Grüsse
Cyx23
-
-