Ich würde auf meiner Homepage gerne ein Layout, das vorwiegend aus DIV-Elementen besteht einbinden. Dazu habe ich einen DIV erstellt, der das gesamte Layout einschließt, die CSS-Class heißt „.container“. Er enthält die Menübar links („.menubar“), den Inhalt („.content“) und die Rightbar („.rightbar“). Um meine Erklärung zu vereinfachen habe ich den Header nun weggelassen.
Denn was ich erreichen möchte ist, dass die Menubar immer bis zum untersten Rand vom Container reicht. D.h. wenn der Inhalt länger ist als die Menübar, soll die Höhe der Menübar sich anpassen.
Meine Frage: Wie kann ich das am besten lösen? Ich habe es schon vergeblich mit height/min-height: 100% in allen möglichen Variationen versucht. Mit display: table / table-row etc. klappt es leider auch nicht wirklich. Vielleicht habe ihr eine Idee…
Vielen Dank!
In meinem Beispiel unter DIV findet ihr das ganze veranschaulicht.
Entweder musst du allen drei die gleiche Höhe geben, dann verlierst du aber die Flexibilität bei zusätzlichem Inhalt.
Oder du verwendest Faux Columns. Du weist also dem allumschließenden Container eine sich vertikal kachelnde Hintergrundgrafik zu, die den Querschnitt der drei Container darstellt: Faux Columns
Also als erstes würde ich dir mal empfehlen, das ganze auf html 4.01 transitional umzustellen. Und eine neuere css version zu benutzen, dann würde das ganze so aussehen: