Zur Navigation

Boxen automatisch anpassen

2 Jörg

Mit der zweiten Box meinst du vermutlich div#main-box ?

Wenn man ältere Browser-Versionen außer acht lassen will, könnte man die Boxen statt mit float in einer Flexbox anordnen:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

... und hierbei die Flex-Items mit "align-content: stretch" strecken:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox/Achsen#align-content

Ich habe allerdings die Erfahrung gemacht, dass der IE11 bei horizontal angeordneten Flex-Items etwas buggy ist.

Möchte man ältere Browser berücksichtigen oder haut die Umsetzung mit dem IE 11 nicht hin, könnte man die Hintergründe der beiden (floatenden) Boxen alternativ auch über eine Hintergrundgrafik des Eltern-Containers erzeugen. Die Grafik ist 1px hoch und 776px breit. Die ersten 210px haben die Farbe #dcdcdc, die folgenden 20px #d1d1d1 und der Rest dann wieder #dcdcdc. Wenn der Eltern-Container ein "overflow: auto" hat, wird die Grafik bis nach unten durchgezogen und erzeugt die Illusion, dass sie die Hintergründe der beiden Kind-Boxen anzeigt

05.06.2017 18:55 | geändert: 05.06.2017 18:59

4 krieger (Gast)

Vielen Dank.
Werde das mal probieren.

05.06.2017 20:43

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]