Angular 将角度PWA部署到GitHub页面时，CSS位置未按预期工作_Angular_Angular Material_Progressive Web Apps_Github Pages

Angular 将角度PWA部署到GitHub页面时，CSS位置未按预期工作

angular angular-material

Angular 将角度PWA部署到GitHub页面时，CSS位置未按预期工作,angular,angular-material,progressive-web-apps,github-pages,Angular,Angular Material,Progressive Web Apps,Github Pages,昨天，我开始为一个使用Angular（材质）构建的PWA开发PoC。为了快速测试，我将应用程序部署到GitHub页面，但我遇到了一个奇怪的CSS问题在本地或我自己的VPS上运行应用程序时，会显示侧导航，汉堡菜单按预期工作：单击时打开和关闭。到现在为止，一直都还不错。现在，当我将应用程序部署到GH页面时，没有找到侧导航。当我和检查员闲逛时，我把范围缩小到： .mat-drawer-container { position: relative; } 禁用“位置”属性时，将显示侧导航，但它与

昨天，我开始为一个使用Angular（材质）构建的PWA开发PoC。为了快速测试，我将应用程序部署到GitHub页面，但我遇到了一个奇怪的CSS问题

在本地或我自己的VPS上运行应用程序时，会显示侧导航，汉堡菜单按预期工作：单击时打开和关闭。到现在为止，一直都还不错。现在，当我将应用程序部署到GH页面时，没有找到侧导航。当我和检查员闲逛时，我把范围缩小到：

.mat-drawer-container {
  position: relative;
}

禁用“位置”属性时，将显示侧导航，但它与工具栏重叠。这正是人们所期望的。但我觉得很奇怪，GitHub页面似乎没有考虑到“相对”位置

导航组件的代码：

    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>kangoeroes-poef</span>
    </mat-toolbar><mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
   <!-- <mat-toolbar>Menu</mat-toolbar>-->
    <mat-nav-list>
      <a mat-list-item href="#">Link Een</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>

  </mat-sidenav-content>
</mat-sidenav-container>

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

以前有人吃过这个吗？我是否遗漏了一些明显的内容，或者这可能是GitHub页面的问题

您可以在此处看到live应用程序：

代码可在此处找到：

谢谢

在谷歌搜索和阅读了一些关于角度材料的文档后，我自己找到了解决方案：

HTML:


菜单
康戈罗斯·波夫

CSS:

.container{
显示器：flex；
弯曲方向：立柱；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
.侧导航{
宽度：200px；
}
.是移动的.工具栏{
位置：固定；
/*确保工具栏滚动通过时位于内容顶部*/
z指数：2；
}
.sidenav容器{
/*当sidenav不固定时，拉伸sidenav容器以填充可用空间
使``充当桌面布局的滚动元素*/
弹性：1；
}
.is mobile.sidenav容器{
/*当sidenav固定时，不要约束sidenav容器的高度
``成为我们移动布局的滚动元素*/
弹性：10自动；
}

<div class="container" [class.is-mobile]="isHandset$ | async">
  <mat-toolbar color="primary">
    <button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()"
      *ngIf="isHandset$ | async"

    >
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>
    <span>kangoeroes-poef</span>
  </mat-toolbar>
  <mat-sidenav-container
    class="sidenav-container"
    [style.marginTop.px]="(isHandset$ | async) ? 56 : 0"
  >
    <mat-sidenav
      #drawer
      class="sidenav"
      [fixedInViewport]="isHandset$ | async"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      fixedTopGap="56"
      [opened]="(isHandset$ | async) === false"
    >
      <!--<mat-toolbar>Menu</mat-toolbar>-->
      <mat-nav-list>
        <a mat-list-item href="#">Link Een</a>
        <a mat-list-item href="#">Link 2</a>
        <a mat-list-item href="#">Link 3</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
      <!-- Add Content Here -->
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


.sidenav {
  width:200px;
}
.is-mobile .toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

.sidenav-container {
  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
     causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
  flex: 1;
}

.is-mobile .sidenav-container {
  /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
     `<body>` to be our scrolling element for mobile layouts. */
  flex: 1 0 auto;
}