Positionierung und autom. vergrößern

meste

Erfahrenes Mitglied
Hallo allerseits,

Ich habe auf der Seite (siehe Bild) die abgebildeten DIV-Elemente.
div1 ist der Hintergund.
div2 für die Navigation (Menüs und Submenüs)
div3 der eigentlicher Inhalt.

Wie kann man mittels css die DIVs so definieren das die Höhen von div1 und div2 autom. auf den Inhalt von div3 angepasst wird.
Manche Inhalte sind lang und manche nur paar Zeilen kurz.
Es soll auf jeden Fall sich autom. auf den Inhalt anpassen ohne Scrollbalken (overflow) und wieder urück wenn der nächste Inhalt kürzer ist.

Es kann auch vorkommen das gerade ein Inhalt mit paar Zeilen angezeigt wird jedoch ein Menü in div2 erweitert wird.
In diesem Fall wird div2 höher und da soll sich div1 und div3 auf die höhe anpassen.
Eigentlich müsste nur div1 auf die Höhe angepasst werden da div1 einen weißen Hintergrund (sowie alle Inhalte für div3) hat. Man würde im unteren Bereich von div3 mehr Weiße Fläche sehen aber wäre schon das Ziel.

Ich hoffe das ich mein Problem halbwegs schildern konnte und falls nicht, oder ich was vergessen haben sollte dann bitte melden.

In diesem Sinne noch einen schönen Sonntag und danke im voraus.

Lg
m.e.s.t.e
 

Anhänge

  • layout.jpg
    layout.jpg
    32 KB · Aufrufe: 14
Hy und danke für deine Antwort.
Das mit flex usw. habe ich bereits probiert jedoch funktioniert das nicht.

Habe vergessen zu erwähnen das Inhalte und vieles andere mittels jquery geladen werden.
Jedoch werden die Styles über css definiert.
 
Das mit flex usw. habe ich bereits probiert jedoch funktioniert das nicht.

Habe vergessen zu erwähnen das Inhalte und vieles andere mittels jquery geladen werden.
Von alledem sehe ich dort nichts!

Und zwei Spaltenblöcke mit height:100% zu formatieren, ist wahrlich nicht zielführend, und entspricht auch keiner der vorgeschlagenen Techniken!
 
... sieht man bei dem fiddle nicht die unterschiedlichen DIV mit dem Text usw.?
Mal ist mehr Text und mal weniger.
Das schwarze DIV in diesem Fall soll sich der größe vom blauen anpassen.

Danke und Lg
 
Der Textumfang interessiert erstmal nicht.

Wie gesagt, deine Demos enthalten überhaupt keine der empfohlenen Techniken, die du angeblich probiert hast, aber in deinem "jQuery-Projekt" wg. besonderen Umständen nicht funktionieren.

Und genau das will ich gern sehen!
 
Zurück