Layout - Divs maximale Höhe geben

[Lavalampe]

Wie kann ich einem div die maximale Höhe geben, damit sich ein Hintergrund sich nach ganz unten erstreckt?


Ich habe zum Beispiel 2 divs nebeneinander und unten ist ein Footer. Eins hat durch den Inhalt die Höhe 100, das andere 50.

Dann habe ich 1 div mit Hintergrund, in dem sich ein weiteres div mit einer gewissen Höhe befindet. Aber der Hintergrund von dem ersten geht nicht bis zum Ende des zweiten runter.


Ich hoffe ihr könnt mir helfen :)

 

[BcF]

Deine Beschreibung verstehe ich nicht so ganz, aber maximale Höhe geht mit max-height ;)

 

[ingoS]

So ganz verstehe ich auch nicht, was du meinst, aber vergisst du möglicherweise einfach nur ein Element mit clear: both;?

 

[Lavalampe]

So meine ich das. Die rechte Spalte soll, wenn die linke größer ist, die Höhe von der linken übernehmen und umgekehrt.

 

[ingoS]

Das geht nur mit einem Trick, der sich "Faux Columns" nennt.
Du gibst einem div, der beide umschließt, ein Hintergrundbild, das die Breite der entsprechenden Spalten hat.

EDIT: Die Einbindung des Bildes mit html-Code funktioniert hier im Forum nicht, nimm BB-Code. :roll:

 

[Lavalampe]

Genau das ist zufällig vorhanden. Dieser Hintergrund passt sich aber nicht den eingeschlossenen divs an. Wenn da nichts anderes drinsteht (Text, ein Bild), sieht man den Hintergrund gar nicht.

Oh, gar nicht gesehen, dass das HTML war^^

 

[ingoS]

In diesem Fall wäre es dann doch besser, wenn du einen Link zur entsprechenden Seite oder den HTML- und CSS-Code posten würdest.

 

[Lavalampe]

<style type="text/css">

* {    margin:0px;    list-style:none;}

#main {
    width:986px;
    margin:0 auto;
}

#second {
    width:980px;
    background-image: url(images_fs/page_bg.png);
    padding:0px 3px 0px 3px;
}

#leftnavi {
    width:150px;    
    float:left;
    background-image: url(images_fs/left_bg.png);
    text-align:left;
    -moz-user-select:none;
}

#content {
    width:590px;    
    float:left;
    background-image: url(images_fs/content_bg.png);
}

#rightnavi {
    width:240px;
    float:left;
    background-image: url(images_fs/right_bg.png);
}

</style>

<div id="main">
<div id="second">
<div id="leftnavi">
<ul>
<li>Navi, viele lis</li>
</ul>
</div>

<div id="content">Hier ist der Content</div>

<div id="rightnavi">
<ul>
<li>Noch ne Navi mit lis</li>
</ul>
</div>
</div>
</div>



*Toggle Funktion vermiss*
Habe ein paar Klassen gelöscht. Im Moment ist leider mein FTP down, deswegen konnte ichs nicht hochladen.
HTML-Tag habe ich mal eingeschränkt, ich will euch ja nicht eine Zeile lesen lassen ;)

 

[prm]

Grundsätzlich passt sich jeder Div der Höhe seines Inhalts an.
Wenn keiner drin und keine Höhe definiert ist, erscheint folglich auch kein Hintergrundbild.
Du könntest es mit min-height versuchen, aber das kann der IE 6 nicht.

Eine andere Fehlerursache ist, dass du nicht gecleart hast.
Du müsstest nach dem Schließen der right-Navi noch ein "clear: both;" setzen, siehe Firefox stellt Hintergrund nicht vollständig dar

Im Übrigen kannst du auf den #second-Div verzichten. Dessen Angaben kannst du ebenso dem #main noch zuweisen.

 

[Lavalampe]

Danke sehr, funktioniert jetzt mit dem page_bg. Die anderen baue ich einafch in den ein :)

 

[neuroleptika]

....
Du könntest es mit min-height versuchen, aber das kann der IE 6 nicht.
....

Das möchte ich mal ergänzen:
Der IE6 kennt min-height zwar nicht aber er behandelt height wie min-height.

* html .selektor {
height: 100%;
}

Berücksichtigen nur IE unter Vers.7 und behandeln IE5 und IE6 wie min-height.
Der IE6 kennt also kein richtiges height.
Wenn man wirklich height meint, könnte man dem Element zusätzlich ein Wert für overflow geben.

Wenn man auf Grafiken verzichten möchte, könnte man mit height bzw. min-height; und position: absolute; mehrere Spalten simulieren und den Inhalt in gleicher vertikaler Aufteilung darüber legen.
Das eignet sich aber nur für sehr schlichte Layouts.