Hallo Leute,
mir ist beim Entwickeln einer vertikal ausgerichteten Seite ein merkwürdiges Verhalten der Browser Chrome und Opera aufgefallen und mich würde interessieren, wie ihr es löst.
Diese Seite hat einfach mehrere Container untereinander. Zum Aufbau des Layouts nutze ich Flexbox.
Manche dieser Container enthalten nichts weiter als eine Farbe und ein Bild bzw. ein Hintergrundbild. Firefox und Edge stellen diese Bild-Container wie gewünscht dar, Chrome und Opera nicht.
Der Header mit dem Titelbild hat eine kalkulierte height von 100vh - der height der Navigation. Dies funktioniert soweit in Firefox und Edge, für Chrome und Opera musste ich hier dem Container schon die kalkulierte height als min-height mitgeben, damit er überhaupt dargestellt wird. Dies ist soweit kein Problem, da man dem Header in der Regel Endgeräte-unabhängig die volle Höhe des Endgerätes zuschreiben möchte und das Bild dann eben mitskaliert.
Wie löst man es aber bei Containern, die einfach nur so hoch wie ihr Inhalt sein sollen? Gebe ich keine min-height, werden sie von Chrome und Opera "verschluckt" und gar nicht dargestellt. Eine min-height angeben kann ich aber auch nicht, da sie sich auf die Höhe des Inhaltes beziehen soll. Habe ich hier bspw. ein Bild von 500px, dann läuft alles bis 500px gut, darunter müsste ich aber in Kauf nehmen, dass das Bild nicht mehr vollständig skaliert wie im Firefox und im Edge, sondern durch Media Queries nur noch in Stufen.
Gibt es hier eine Möglichkeit, um dies zu umgehen?
mir ist beim Entwickeln einer vertikal ausgerichteten Seite ein merkwürdiges Verhalten der Browser Chrome und Opera aufgefallen und mich würde interessieren, wie ihr es löst.
Diese Seite hat einfach mehrere Container untereinander. Zum Aufbau des Layouts nutze ich Flexbox.
Manche dieser Container enthalten nichts weiter als eine Farbe und ein Bild bzw. ein Hintergrundbild. Firefox und Edge stellen diese Bild-Container wie gewünscht dar, Chrome und Opera nicht.
Der Header mit dem Titelbild hat eine kalkulierte height von 100vh - der height der Navigation. Dies funktioniert soweit in Firefox und Edge, für Chrome und Opera musste ich hier dem Container schon die kalkulierte height als min-height mitgeben, damit er überhaupt dargestellt wird. Dies ist soweit kein Problem, da man dem Header in der Regel Endgeräte-unabhängig die volle Höhe des Endgerätes zuschreiben möchte und das Bild dann eben mitskaliert.
Wie löst man es aber bei Containern, die einfach nur so hoch wie ihr Inhalt sein sollen? Gebe ich keine min-height, werden sie von Chrome und Opera "verschluckt" und gar nicht dargestellt. Eine min-height angeben kann ich aber auch nicht, da sie sich auf die Höhe des Inhaltes beziehen soll. Habe ich hier bspw. ein Bild von 500px, dann läuft alles bis 500px gut, darunter müsste ich aber in Kauf nehmen, dass das Bild nicht mehr vollständig skaliert wie im Firefox und im Edge, sondern durch Media Queries nur noch in Stufen.
Gibt es hier eine Möglichkeit, um dies zu umgehen?
Kommentar