Creating a layout with a fixed header, fixed sidebar, fixed content section using Angular Material / Flex-Layout in Angular

Question

I am using Angular w/ Angular Material and Flex Layout

I am attempting to create a layout for a web application that is exactly like this site. Notice the fixed header, fixed sidebar, fixed content pain. No browser scrolling is used, only div scrolling and fits perfectly in the browser viewport.

Here is the html I am using to give me my basic structure:

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>

Additionally I set the following styles:

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
md-sidenav-container, .main-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

I noticed that without the toolbar on the page everything works perfectly. So then I added a padding-bottom: 64px; to the md-sidenav-container, .main-content classes. It seems like it fixed it for the content, but not the sidenav. The sidenav scrollbar still goes way below the browser window.

I do have flex-layout installed to my Angular app if anyone can tell me how to do it with the flex directives. Otherwise, plain css would be fine too.

Answer 1

You can check working example at https://angular-material2-issue-dgcx3j.stackblitz.io/

It's not completely as same as you've requested (it has extra functionality). The sidebar is fixed on big screens, hides responsively on small screens and shows the menu button on toolbar.

You can review the code at https://stackblitz.com/edit/angular-material2-issue-dgcx3j?file=app%2Fapp.component.ts

Also you can find the source code of Angular Material Docs Site (the one you've asked the same functionality) at https://github.com/angular/material.angular.io

Answer 2

You may try this code

html

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav" opened="true">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
     <div class="my-content">Main content</div>
  </div>

</md-sidenav-container>

css

.example-container {
  width: 500px;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.example-sidenav {
  padding: 20px;
}

.my-content{
  height:1200px;
}

and heres the Plunker link : https://plnkr.co/edit/YFGQdVcNnIhMK0GzZ25Z?p=preview