Zwei Boxen nebeneinander, so hoch wie die höchste, jedoch mind. so hoch wie der Monitor


#1

Hallo,

Ich hatte versucht meine Homepage nachzubauen, aber es ist nicht möglich, das nachzustellen.

Es ist im Prinzip 2 Boxen: Eine für Menü und eine für Inhalt. Die Menübox kann größer werden, wenn man Menüs ausklappt. Über die gesamte Höhe soll ein Hintergund verlaufen, jedoch MIND. so groß wie die Bildschirm Höhe (wenn Inhalte kleiner sind), jedoch immer so groß wie die angezeigten Inhalte (wenn Inhalte größer sind als Bildschirm).

Ich habe ein ganz einfaches Beispiel gemacht, eine Hauptbox, und darin 2 weitere Boxen (für Menü und Content). Jedoch reagiert die Hauptbox immer nur auf die erste Box, nie jedoch auf die zweite Box. D.h. wenn Menu 200 px ist, wird die Hauptbox auch 200px. Wenn ich nun den Content 300 px hoch mache, dann bleiben die anderen Boxen 200px und der Content ragt 300 hinaus. Drehe ich die Reihenfolge von Content und Box um, dann reagiert es auf Content, und nicht mehr auf die Menübox.

Das kann ja nicht sein, wenn zwei Boxen innerhalb der Hauptbox sind, dass eine reagiert, die andere aber nicht. Es ist unglaublich. Schon an dem einfachen Beispiel versagt CSS bei mir.

Eine Homepage ist sehr komplex aufgebaut, da sind sehr viele Boxen und Verschachtelungen, was ich nicht verstehe, aber ich dachte, es müste doch einfacher möglich sein, zwei Inhalte nebeneinander darzustellen, die beide die Hauptbox größer machen, aber es ist nicht möglich?!

Gibt es vielleicht einen CSS Zauberer, der mir so ein kompexes Beispiel erstellen könnte? Wichtig ist, dass sich auch der Hintergrund an den größten Inhalt anpasst, es aber immer min. die Bildschirmhöhe abdeckt. Es ist, wie gesagt, äußert komplex.

Wenn man Höhe 100% geht, dann nimmt er nur die Bildhöhe, nicht aber die Seitenhöhe.

Ich habe nun:

#banner {
width: 1035px;

margin-left: auto;
margin-right: auto;

background-color: #ffffff;

}

#menu {
width: 50%;
height: 300px;
background-color: yellow;
}

#content {
width: 50%;
height: 400px;
background-color: red;
}

Obwohl beide Codes gleich sind, reagiert es unterschiedlich, wenn man die HEIGHT in Content oder Menü verändert. Waskann man tun, um diesen Bug zu umgehen?


#2

Ich habe hier noch was gefunden, aber ich glaube das st relativ neu (?) - vielleicht nicht so gut unterstüzt?

https://www.w3schools.com/css/tryit.asp?filename=trycss_float_boxes_flex


#3

Für diese Fragestellung kann ich caniuse.com empfehlen:
https://caniuse.com/#feat=flexbox