Wie würdet ihr folgendes Grid-Layout realisieren?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
271
2
18
Hallo zusammen,

wie würdet ihr folgendes Grid-Layout realisieren? Die Sidebar und der Header sind fixed, also zu jeder Zeit zu sehen, wobei der Main-Content scrollable sein soll. Die Sidebar selbst soll innerhalb ebenfalls scrollable sein, wenn nicht alle Inhalte reinpassen. Wie würdet ihr solch ein Grid-Layout realisieren? Ich bin mir da noch ziemlich unsicher und würde gerne wissen, wie erfahrene Programmierer das angehen würden.
1618672380600.png
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Die althergebrachte Methode, so etwas zu realisieren, besteht darin, den Header und die Sidebar fixed bzw. sticky zu positionieren, so dass sie beim Scrollen stehen bleiben. Dies hat jedoch verschiedene Nachteile, die man vermeiden kann, indem man nur den Maincontent scrollbar macht. Dafür hatte ich eine Demo in der Schublade, die ich für deinen Fall etwas angepasst habe, ohne Deko und aufwändiges Styling:
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
271
2
18
Die althergebrachte Methode, so etwas zu realisieren, besteht darin, den Header und die Sidebar fixed bzw. sticky zu positionieren, so dass sie beim Scrollen stehen bleiben. Dies hat jedoch verschiedene Nachteile, die man vermeiden kann, indem man nur den Maincontent scrollbar macht. Dafür hatte ich eine Demo in der Schublade, die ich für deinen Fall etwas angepasst habe, ohne Deko und aufwändiges Styling:
Danke für deinen Input, ich schau es mir mal genauer an!
 
Werbung:

Tronjer

Senior HTML'ler
8 Oktober 2010
5.239
484
83
Berlin
Gar nicht selber machen. Ich nehme UI Frameworks, die so etwas mitbringen, wie Material oder Ionic. Da fährt die Sidenav auch automatisch aus und ein beim Skalieren des Viewports.
 
  • Like
Reaktionen: Tabula_Rasa
Werbung: