Wie würdet ihr folgendes Grid-Layout realisieren?

[Tabula_Rasa]

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.

 

[Tabula_Rasa]

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:

Demo Flexlayout

Danke für deinen Input, ich schau es mir mal genauer an!

 

[Tronjer]

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.