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

【问题标题】：CSS position not working as expected when deploying Angular PWA to GitHub pages将 Angular PWA 部署到 GitHub 页面时，CSS 位置未按预期工作
【发布时间】：2020-01-09 17:51:47
【问题描述】：

昨天我开始为使用 Angular (Material) 构建的 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>

导航组件的 SCSS：

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

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

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

您可以在此处查看实时应用：https://poef.dekangoeroes.be

代码可以在这里找到：https://github.com/fosdekangoeroes/kangoeroes.poef

谢谢！

【问题讨论】：

标签： angular angular-material progressive-web-apps github-pages

【解决方案1】：

在谷歌搜索和阅读 Angular Material 的文档之后，我自己找到了解决方案：

HTML：

<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>

CSS：

.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;
}

【讨论】：