时间戳

首页 > 解决方案 > Angular Flex 布局总是显示滚动条

css - Angular Flex 布局总是显示滚动条

问题描述

我是角度和弹性布局的新手。我的页面非常简单。带有侧面导航栏和路由器插座的标题。

我遇到了我的页面总是显示滚动条的问题。

如果我删除 fxFlexFill，滚动条不会显示。我怎样才能解决这个问题？

这是 stackblitz 演示Stackblitz

这是我的模板：

.fill-space {
  flex: 1 1 auto;
}

.content {
  flex: 1 1 auto;
  padding: 15px;
  position: relative;
  overflow-y: auto;
}

.footer {
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
}
<div style="height: 100vh;">
  <mat-toolbar color="primary" class="fixed-header">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>
      <span><button mat-button routerLink="/home"><h3>HOSPITALITY</h3></button></span>
      <span class="fill-space"></span>
      <div fxShow="true" fxHide.lt-md="true">
        <button mat-button routerLink="/home">HOME</button>
        <button mat-button routerLink="/account">MY ACCOUNT</button>
        <button mat-button routerLink="/login">LOGOUT</button>

        <a href="#" routerLink="/cart" mat-button>
          <mat-icon>shopping_cart</mat-icon>
          0
        </a>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill>
    <mat-sidenav #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
      
      <div fxLayout="column">
        <button mat-button routerLink="/home">HOME</button>
        <button mat-button routerLink="/account">MY ACCOUNT</button>
        <button mat-button routerLink="/login">LOGOUT</button>

        <a href="#" routerLink="/cart" mat-button>
          <mat-icon>shopping_cart</mat-icon>
          0
        </a>
      <a (click)="sidenav.toggle()" mat-list-item>
        <mat-icon>close</mat-icon> Close
      </a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content >
      <div class="content">
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>

</div>

标签： cssangularflexboxangular-flex-layout

解决方案

主要问题是侧导航通过 fxFlexFill 指令获得 100vh 的高度。

你需要考虑到 的高度mat-toolbar-row，例如通过 CSS calc （还有其他方法可以达到他的效果，取决于你如何 struct 页面布局）

此外，body 有 8px 的边距，与浏览器默认样式不同。

这是 Stackblitz 的一个分支

推荐阅读