overflow auto bei responsive design

[Michael_K]

Hallo,

ich bin auf der Suche nach einer Lösung für ein Problem, was eigentlich ganz einfach klingt. Ich habe zwei div container mit jeweils viel Inhalt.

1. Auf einem breiten Bildschirm sollen die beiden Container nebeneinander dargestellt werden und jeder container ist für sich unabhängig scrollbar, wenn die höhen des Bildschrims nicht ausreicht.

2. Auf einem kleinen Bildschirm sollen die beiden Container untereinander dargestellt werden. Dabei sollen die Inhalten im Container nicht mer scrollbar sein, sondern die beiden Container werden vollständig nacheinander angezeigt und der Inhalt des Oberelement, in dem sich beide Container befinden soll scrollbar sein.

Ich wollte es mit bootstrap-Framework realisieren, aber irgendwie erreiche ich nicht meine Lösung. Kann es sein, dass ich hier wirklich nur mit einer Lösung mit media-query in den global styles es schaffe und mit den bootstrap-Klassen es nicht?

Ich hatte an zwei Spalten gedacht, etwa so:

<div class="row">
  <div class="col-12 col-lg-6">
   Viel Text hier
 </div>
 <div class="col-12 col-lg-6">
   Noch einmal viel text
 </div>
</div>

[Rolf B]

Hallo Michael_K,

naja, ich habe ja keine Ahnung von Bootstrap, aber genau so wird es ja hier erklärt. Nur ohne das col-12. Das könnte stören. Aber im Prinzip sollte funktionieren, was Du gemacht hast. Wenn nicht, könnte irgendwas am Umfeld stören, das kann ich nicht beurteilen.

Die Mediaqueries übernimmt Bootstrap für Dich. Die col-lg Spalten werden untereinander gesetzt, wenn der Viewport nicht "large" ist (also 992px).

Dieser Satz im Handbuch:

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

zeigt allerdings, dass die Kameraden ein grundsätzliches Verständnisproblem von relativen Maßen haben. Oder wir bei Selfhtml, denn selbst Microsoft stopft Boot(st|c)rap als Default in neue ASP.NET Seiten hinein.

Gerade weil em mit der Fontsize skaliert, möchte man ja Mediaqueries mit em machen. Wenn der Anwender den Font hochskaliert, muss man auch bei breiteren Bildschirmen auf "untereinander" umschalten. Dabei ist zu unterscheiden zwischen Seitenzoom - der definiert das "Pixel" um - und der Default-Fontgröße. Die macht Schriften größer (solange man seine Webseite mit em/rem-Fontsize baut und nicht mit px), aber das CSS Pixel bleibt gleich groß.

Muss es Bootstrap sein? Was Du möchtest, ist mit einem Grid oder einer Flexbox sehr einfach erledigt. Mit col-lg-6 auch, wenn auch mit Umschaltpunkten, die eine vom User geänderte Textgröße ignorieren.

Rolf

[Michael_K]

Hallo Rolf,

es mag ja sein, dass Bootstrap das CSS-Äquivalent zu jQuery ist ;-) Aber es erleichtert die Sachen ungemein. Und seitdem mit vers. 5.3 auch dark-mode halbswegs implementiert wurde, macht es das Leben um Einiges leichter.

Ich habe aber keinen Weg gefunden und werde es wohl nun mit einer eigenen media-query umsetzen.

Danke und Gruß

Michael