✔ Div Höhe automatisch anpassen (100%)

[spacefrog]

Hallo,

mal wieder ein Div-Problem...

Ich habe in eine Webseite ein Haupt-Div in dem sich zwei weitere befinden (für Menü und Content). Wenn ich viel Inhalt im Content-Div habe soll sich das Menü-Div automatisch in der Höhe an das Content-Div anpassen. Dies brauche ich weil im Menü-Div ein Hintergrundbild eingebunden wird das immer bis zum Seitenende mit angezeigt werden soll.

Einen Besipielcode von mir findet ihr unter http://www.iamx.info/test.htm

Im moment wird das Menü-Div bei 100% Höhe immer nur auf die Höhe des Browserfensters vergrößert und funktioniert auch nur im FF. Es soll aber automatisch genau so hoch sein wie das Content-Div und natürlich in allen Browsern funktionieren.

Würde mich freuen wenn mir jemand weiterhelfen kann!

Gruß
spacefrog

 

[Maik]

Hi,

in dem Thread div height=100% nur im IE? haben Dr Dau und ich Lösungsbeispiele als ZIP-Dateien angehängt, die dir weiterhelfen sollten.

Und da es sich hier um eine CSS-Frage handelt, wird das Thema auch ins entsprechende Board verschoben.

 

[spacefrog]

Hallo,
ich habe mir die Beispiele mal angesehen. Aber es scheint mir so als ob es nicht möglich ist mein Problem zu lösen.
Ich habe es anhand deines Posts http://www.tutorials.de/forum/1223592-post13.html probiert.

Wenn ich die Hintergrundgrafik auf das Div #nav setze wir die Höhe nicht angepasst, nur wenn es auf #center steht da das div ja durch #content automatisch angepasst wird.

Ich benötige allerdings eine Lösung wo die Hintergrundgrafik auf dem div #nav liegt und sich das Div trotzdem dynamisch der Seitenhöhe anpasst.

Gib es vielleicht noch eine andere alternative oder ist das Problem wirklich nicht lösbar?

Gruß
spacefrog

 

[Maik]

In meinem Beispiel habe ich das Hintergrundbild im Elternelement #center eingesetzt.

In deinem Layout entsprechend wäre dies derzeit das body-Element:

body {
background: url(pfad/zur/grafik.jpg) repeat-y left top;
}

Ansonsten schau dir mal Dr Daus Variante genauer an -> http://www.tutorials.de/forum/1085592-post4.html

 

[BUG SPAWNY]

2 DIVs - Jeweils die Höhe anpassen.

Hallo.

Erstmal vorab: Dieses Thema ist zwar etwas älter, jedoch denke ich, dass meine Frage hier gut rein passt und dafür kein neues Thema eröffnet werden muss. Das machts doch nur unübersichtlicher.

Aber nun erstmal zu meinem Problem.
Ich habe in einem Abschnitt meines CSS-Layouts folgende Komposition:

+------------+------------------------------------+------------+
|------------|------------------------------------|------------|
|----NAVI----|---------------CONTENT--------------|------------|
|------+-----|-------------------+----------------|---BG-1-----|
|----BG-1----|-----------------BG-2---------------|------------|
+------------+------------------------------------+------------+

Ich würde es gerne so implementieren, dass Sich die Höhe von CONTENT bzw NAVI immer dem Maximalen anpasst. Sprich: Ist CONTENT höher als NAVI, passt sich NAVI an - und andersrum. Die in meiner Grafik gleichfarbigen Teile gehören zusammen.

Lässt sich das irgendwie mit CSS und DIVs lösen oder muss ich doch auf Tabellen zurückgreifen?

Beste Grüße und ein schönes Wochenende,
-- BUG.

 

[Maik]

Hi,

besitzt das Layout eine fixe oder variable Breite?

 

[BUG SPAWNY]

Hi,

besitzt das Layout eine fixe oder variable Breite?

Oh, das habe ich ja ganz vergessen mit anzugeben.

• Die Navigation (gelb) passt sich an die breite der Webseite an - nach links und rechts
• Der Inhalt (blau) hat eine fixe Breite und feste Position (voraussichtlich zentriert)

Danke für die schnelle Antwort.

 

[ShadowMan]

Hi du!

Es gibt einen Trick, wie sich das recht gut lösen lässt meiner Meinung nach. Und zwar definiert man das rechts und links als border des mittleren Teils, heißt deine Border ist dann nicht 1px breit sondern direkt 200px. Ich hatte auch mal ein Tutorial dafür gesehen, müsste nur auch mal danach suchen. Der Ansatz ist aber denke ich klar, oder?
Eine wirklich bessere Lösung kenne ich zur Zeit noch nicht und mal ganz ehrlich: Bevor man dann alles mit CSS "hackt", weils so nicht geht, dann sind Tabellen sogar wahrscheinlich die sauberere Möglichkeit.

Lg,
Manuel ;-]

 

[BUG SPAWNY]

Das Problem bei der "Border-Lösung" ist nur, dass ich die Navigation nicht auf die Kante von CONTENT schreiben kann und das, was bei mir gelb ist, hat ein Hintergrundbild. Schade, dass es nicht so einfach ist
Prinzipiell hast du mit deiner Aussage zu CSS-DIVs und Tabellen recht, jedoch hoffe ich einfach, dass es eine einfache Lösung gibt, auf die ich selbst noch nicht gekommen bin.

 

[Maik]

Es gibt einen Trick, wie sich das recht gut lösen lässt meiner Meinung nach. Und zwar definiert man das rechts und links als border des mittleren Teils, heißt deine Border ist dann nicht 1px breit sondern direkt 200px. Ich hatte auch mal ein Tutorial dafür gesehen, müsste nur auch mal danach suchen.

http://www.cssplay.co.uk/layouts/3cols.html

Der Haken daran ist, dass die beiden äußeren Spalten in der Breite variabel sein sollen, und das funktioniert mit dem Rahmen nicht.

Aber vielleicht lässt sich da was mit http://positioniseverything.net/thr.col.stretch.html drehen?