IE 6 möchte mein div nicht bis zum unteren rand ausdehnen...

[Niki]

Hallo allerseits!

Starten wir mal problembeschreibung:

div layer mit folgendem css:
#end{
 position: absolute;
 left:185px;
 top:226px;
 bottom:0px;
 width: 600px;
 background-image:url(../images/stretch_norm.jpg);
}

der steht da im raum und vervielfältigt sich nach unten zum bildschirmrand. Darüber wird dann entsprechend Inhalt ausgestrahlt.

Funktioniert mehr als perfekt in FireFox 2.
aber, IE 6 möchte nicht. der zeigt den layer (mangels height??) nicht an. IE 7 habich noch nicht getestet, da ich nicht zuhause bin und mangels faulheit den nicht auf notebook installiert habe...

naja, habe dann für ie alle parents vom div (sprich html und body) mit height 100% versehen, und dem div eine height von 100% gegeben.

Diese Lösung stinkt aber, da ein scrollbalken nun vorhanden ist, bei welchem gescrollt werden kann, obwohl nichts da unten ist ausser hintergrundbildwiederholungen, die keiner sehen möchte.

tja. was machen? da der inhalt dynamisch und verschieden ist, die bildschirmauflösung der benutzer ja bekanntlich auch, kann ich keinen fixen oder fixen prozentwert gebrauchen...

bei suchen nach entsprechenden problemlösungen hab ich das gefunden:
http://forum.de.selfhtml.org/archiv/2006/10/t138348/

habe code auf mein div angepasst, leider läuft das bei mir nicht:
<!--[if ie]>
<style type="text/css">
div#end { height:expression((document.body.offsetHeight - 226) + "px"); }
</style>
<![endif]-->

Hat wer eine ahnung, wie mir zu helfen ist?

[Der Martin]

n'Abend!

#end{
position: absolute;
left:185px;
top:226px;
bottom:0px;
width: 600px;
background-image:url(../images/stretch_norm.jpg);
}

Dieses Element steht zunächst mal am unteren Rand seines Elternelements und lässt nach oben 226px Platz. Vorausgesetzt, dessen Parent gibt überhaupt soviel Höhe her. Welches ist das? Der body? Wahrscheinlich.

Funktioniert mehr als perfekt in FireFox 2.

Auch wenn body und html durch wenig Inhalt nur eine geringe Höhe erreichen?

aber, IE 6 möchte nicht. der zeigt den layer (mangels height??) nicht an.

"Mangels height" ist zumindest die richtige Spur. Der IE ist zu dämlich, aus bottom und top selbständig die Höhe des Elements zu bestimmen. In deinem Beispiel wird er wahrscheinlich eine der beiden Koordinaten berücksichtigen, und die Höhe des Elements dann nach seinem Inhalt bestimmen.

naja, habe dann für ie alle parents vom div (sprich html und body) mit height 100% versehen, und dem div eine height von 100% gegeben.
Diese Lösung stinkt aber, da ein scrollbalken nun vorhanden ist, bei welchem gescrollt werden kann, obwohl nichts da unten ist ausser hintergrundbildwiederholungen, die keiner sehen möchte.

Das div ist 100% hoch, aber um 226px nach unten verschoben? Der IE scheint also die bottom-Angabe zu ignorieren.

tja. was machen? da der inhalt dynamisch und verschieden ist, die bildschirmauflösung der benutzer ja bekanntlich auch, kann ich keinen fixen oder fixen prozentwert gebrauchen...

Wäre top:0; height:100%; padding-top:226px; eine Lösung für dich?

<!--[if ie]>
<style type="text/css">
div#end { height:expression((document.body.offsetHeight - 226) + "px"); }
</style>
<![endif]-->

Das funktioniert vor allem nur mit aktivem Javascript. :-(

So long,
 Martin

[Inita_]

hi,

brauchst du so etwas?

http://inix.blogiem.lv/2007/07/25/8989.html

G, Inita

[Niki]

Danke für eure Antworten, das mit dem padding-top hat leider nicht funktioniert, da padding anscheinend nicht für den background gilt.

Danke für den link mit dem beispiel des footers, der unten klebt.
Da ich einen footer bräuchte, der sich heightmässig anpasst war das auch nicht 100% das.

ABER:
Beide Lösungen Antworten haben mich inspiriert.

Die Lösung ist eigentlich relativ einfach:
Ein div mit:
#coil {
 position: absolute;
 left:185px;
 top:0px;
 width: 600px;
 background-image:url(../images/stretch_norm.jpg);
        min-height:100%; /* For Modern Browsers */
        height:auto !important; /* For Modern Browsers */
        height:100%; /* For IE */
}

welches immer minimum 100% vom bildschirm hat und das stretchbild von oben bis unten durchzieht.

Darüber wird dann ein Header gesetzt der einfach seine hintergrundfarbe und seine hintergrundbilder über die unnötigen stretches zieht.
Das content-div wird nun als einziges child vom "coil"-div je nach inhalt gestreckt und erweitert somit (wie gewünscht) nur wenn benötigt das browserfenster mit einer scrollbar.

Das ganze ist sogar w3c validiert ^^

mir hat nur die inspiration gefehlt...