Contao 3.2.16 - Linke Spalte soll immer max. Höhe haben

[Mario.Karstaedt]

Moin moin,

der Titel verrät schon einiges, Spass beiseite:

Ich habe ein Problem, ich würde gern meine Navigation in der linken Spalte anzeigen lassen, welche dann immer die max. Höhe haben soll. (Pic_1.png)
Jedoch gestaltet sich das recht schwierig, da der Bereich nur...seht selbst...(Pic_0_so_siehts_aus.png)

Ratschläge werden gern entgegen genommen.

Thx in advance.

[peter_lang]

Wenn es dir nur um die Farbe im Hintergrund geht, dann kannst du auch die linke Spalte über css färben.

[Samuell]

[id="left"] {
position: fixed;
top: 0px;
left: 0px;
max-width: 288px;
min-height: 800px;
width: 100%;
height: 100%;
z-index: 500;
}

[Mario.Karstaedt]

[id="left"] {
position: fixed;
top: 0px;
left: 0px;
max-width: 288px;
min-height: 800px;
width: 100%;
height: 100%;
z-index: 500;
}

Jetzt ist die linke Spalte weg. Oo

[Samuell]

Ok. Mein Fehler. Ich hätte dazu schreiben sollen:

So kann man es machen. Ob das klappt oder nicht hängt natürlich davon ab ob Du das Contao Framework oder ein anderes Framework nutzt.
Je nach dem ist der CSS-Code anzupassen.
Auch hat das Umgebende Div einen Einfluss auf das Verhalten.

[Andreas]

Setz mal dieses CSS auf die Demo http://demo.contao.org/en/content-elements.html dann siehst du, wie das gehen kann.

#container {
  background: blue;
  padding-bottom: 0;
}
#main {
  background: red;
  margin-top: 0;
}

Um die linke Spalte tatsächlich auf die Höhe von #container zu bringen, müsste man deine Seite sehen und schauen, was am ehesten Sinn macht, es gibt mehrere Möglichkeiten.

[tab]

Funktioniert aber m.E. nur richtig, wenn die Hauptspalte höher ist als die linke Spalte. Ansonsten sieht man den blauen Container-Hintergrund unterhalb der Hauptspalte. Geht natürlich auch per jQuery zum Beispiel. Vor längerer Zeit hat sich in einem anderen Thread mal eine funktionierende Lösung ergeben, die ich auch eine Zeit lang benutzt habe (mittlerweile habe ich die unterschiedliche Hintergrundfarbe der Seitenspalten rausgenommen, womit sich das Problem natürlich in Luft aufgelöst hat). Allerdings damals für 3 Spalten, aber lässt sich natürlich auch mit 2 Spalten entsprechend machen.

[Mario.Karstaedt]

Das ist die adresse: http://set-web.de

[tab]

Wenn da links nichts größeres mehr dazu kommt, sollte die Gefahr gering sein, dass die linke Spalte höher wird als die Hauptspalte. Dann kannst du die Hintergrundfarben auf die Art setzen wie von Andreas beschrieben. Das finde ich dann die eleganteste Lösung. Wenn du natürlich sowieso schon jQuery benutzten wirst auf deiner Seite, kannst du z.B.auch die von mir verlinkte jQuery-Lösung auf 2 Spalten abwandeln. Was auch geht in solchen Fällen: "Faux columns". Ein einzeiliges Hintergrundbild mit den entsprechenden Hintergrundfarben der Spalten mit repeat-y. Ist aber nachträglich nicht ganz so einfach auf andere Farben und Spaltenbreiten anpassbar.

[Mario.Karstaedt]

Ich bedank mich schonmal brav...und werd mal das zuvor beschriebene Ausprobieren.

Thx

[Andreas]

Funktioniert aber m.E. nur richtig, wenn die Hauptspalte höher ist als die linke Spalte. Ansonsten sieht man den blauen Container-Hintergrund unterhalb der Hauptspalte.

Stimmt, habe ich nicht bedacht. Also entweder stört dich das nicht, oder du kannst die Höhe per Javascript setzen.

Oder du verwendest nicht das Framework-CSS von Contao, sondern dein eigenes mit Flex-Boxen http://the-echoplex.net/flexyboxes/

Display table und table-cell geht leider nicht, weil die Reihenfolge im Markup main, left, right ist.

Seltsamerweise funktioniert es im FF schon, wenn man den #container auf display:flex; setzt, obwohl sämtliches andere CSS für die Spalten dann keinen Sinn mehr macht. Ob das auch in anderen Browsern so ist?

[tab]

Wahrscheinlich haben wir das was er wirklich haben will noch gar nicht richtig verstanden. Er will die Spalten nicht (nur) gleich hoch haben, sondern so hoch wie das Browserfenster. Ich denke, da müsste man wohl html und body per CSS Höhe 100% setzen. Bei #wrapper, #container, #main und #left dann Mindesthöhe 100%. Hatten wir auch schon diverse Threads zu dem Thema, oft im Zusammenhang mit "sticky footer".

[Mario.Karstaedt]

Wahrscheinlich haben wir das was er wirklich haben will noch gar nicht richtig verstanden. Er will die Spalten nicht (nur) gleich hoch haben, sondern so hoch wie das Browserfenster. Ich denke, da müsste man wohl html und body per CSS Höhe 100% setzen. Bei #wrapper, #container, #main und #left dann Mindesthöhe 100%. Hatten wir auch schon diverse Threads zu dem Thema, oft im Zusammenhang mit "sticky footer".

THX! Genau darum geht es! Ich probier das ganze mal..

[Mario.Karstaedt]

Soweit so gut, erstmal danke für die rege Beteiligung.

Eine Sache bleibt nun noch, durch die absolute Positionierung von #left, flattert die Spalte nun mitten im Content herum.

Any ideas?

[Andreas]

Sticky footer wurde hier ja noch nicht erwähnt. Da auf der Seite kein Header und kein Footer ist, kann man mit min-height:100vh; arbeiten (vh: viewport height). Browser, welche das nicht unterstützen kann man dabei einfach ignorieren.

Ich würde an Stelle der Hintergrundbilder mit CSS arbeiten - background-color (Farbe oder linear-gradient) und/oder box-shadow. Arbeitest du doch weiterhin mit Bildern, kannst du ja auch leicht ein Bild für den #wrapper machen, welches alle Farben und auch den Verlauf enthält.

..."Faux columns". Ein einzeiliges Hintergrundbild mit den entsprechenden Hintergrundfarben der Spalten mit repeat-y....

[Samuell]

Ergänze mal Dein CSS um:

#left {
    left: 0;
    top: 0;
    z-index: 100;
    margin-left: 0;
}

[Mario.Karstaedt]

Ergänze mal Dein CSS um:

#left {
    left: 0;
    top: 0;
    z-index: 100;
    margin-left: 0;
}

Sehr schön! Danke Sam...so solls aussehen.

Großes Danke an alle Helfer!

[Samuell]

Bedenke bitte noch die Anregungen von Andreas.
Für die Einfarbigen Flächen brauchst Du kein Hintergrundbild.

Hintergrundfarbe und Box-Shadow reichen.
Auch der background-gradient ist eine Idee, wobei ich in diesem Fall nicht weis wie es mittlerweile mit der Performance ist.