<mat-toolbar>更改所有页面的高度

Question

我是角度新手，所以请帮助我理解。我在我的页面上添加了一个来自角度材料的工具栏，它改变了我的页面的高度。正如您在屏幕截图中看到的，我的页面完全是空白的，但我可以看到这个垂直滚动条，它将内容精确地滚动到工具栏的高度。

这是我的代码：

<mat-drawer-container>
    <mat-drawer #drawer [(opened)]="opened" mode="over" position="end" class="history-tab">
        <div class="mdrawer-header-item">
            <span class="mdrawer-header-title">History</span>
            <button mat-icon-button (click)="opened=!opened">
                <mat-icon>close</mat-icon>
            </button>
        </div>
        <div class="history-list">
            <ul>
                <li *ngFor="let activityLog of service.historyPaged.items">
                    <app-activity-log [activityLog]="activityLog"></app-activity-log>
                </li>
            </ul>
        </div>
        <div class="show-more-btn">
            <button mat-stroked-button color="primary" (click)="ShowMoreClick()">
                <mat-icon>
                    replay
                </mat-icon>
                Show more
            </button>
        </div>
    </mat-drawer>
    <mat-drawer-content>
        <mat-toolbar #toolbar class="fixed-toolbar">
            <span>My Taskboard</span>
            <span class="spacer"></span>
            <button mat-icon-button class="icon" title="History" (click)="opened=!opened">
                <mat-icon>history</mat-icon>
            </button>
        </mat-toolbar>
        <mat-toolbar #placeholder></mat-toolbar>
        <app-taskboard></app-taskboard>
    </mat-drawer-content>
</mat-drawer-container>

CSS：

.spacer {
    flex: 1 1 auto;
}

.fixed-toolbar {
    position: fixed;
}

.mdrawer-header-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    margin-bottom: 10px;
    background-color: rgb(84, 100, 100);
    border: 3px;
    color: rgb(254, 255, 246);
}

.mdrawer-header-title {
    padding-left: 10px;
}

.history-tab {
    max-width: 30%;
}

.show-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

我尝试将工具栏从 mat-drawer-container 移动到外部，但 id 不起作用

Answer 1

我尝试了你的代码，确保你的组件 CSS 包含以下内容

:host {
  display: block;
  height: inherit;
}

.full-height {
  height: 100%;
}

我刚刚调整了它，使高度始终为全高，而且我认为问题来自于

global-styles.scss

中的额外填充，请参考下面的stackblitz并尝试检查额外填充在主体上添加的位置！

样式.scss

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
}

html,
body {
  height: 100%;
}

.spacer {
  flex: 1 1 auto;
}

.fixed-toolbar {
  position: fixed;
}

.mdrawer-header-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  margin-bottom: 10px;
  background-color: rgb(84, 100, 100);
  border: 3px;
  color: rgb(254, 255, 246);
}

.mdrawer-header-title {
  padding-left: 10px;
}

.history-tab {
  max-width: 30%;
}

.show-more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

完整代码：

HTML：

<mat-drawer-container class="full-height">
  <mat-drawer
    #drawer
    [(opened)]="opened"
    mode="over"
    position="end"
    class="history-tab"
  >
    <div class="mdrawer-header-item">
      <span class="mdrawer-header-title">History</span>
      <button mat-icon-button (click)="opened=!opened">
        <mat-icon>close</mat-icon>
      </button>
    </div>
    <div class="history-list">
      <ul>
        <li *ngFor="let activityLog of service.historyPaged.items">
          <app-activity-log></app-activity-log>
        </li>
      </ul>
    </div>
    <div class="show-more-btn">
      <button mat-stroked-button color="primary" (click)="ShowMoreClick()">
        <mat-icon> replay </mat-icon>
        Show more
      </button>
    </div>
  </mat-drawer>
  <mat-drawer-content>
    <mat-toolbar #toolbar class="fixed-toolbar">
      <span>My Taskboard</span>
      <span class="spacer"></span>
      <button
        mat-icon-button
        class="icon"
        title="History"
        (click)="opened=!opened"
      >
        <mat-icon>history</mat-icon>
      </button>
    </mat-toolbar>
    <mat-toolbar #placeholder></mat-toolbar>
    <app-taskboard></app-taskboard>
  </mat-drawer-content>
</mat-drawer-container>

TS：

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { TaskboardComponent } from 'src/app/taskboard/taskboard.component';
import { ActivityLogComponent } from 'src/app/activity-log/activity-log.component';
import { CommonModule } from '@angular/common';

/**
 * @title Autosize sidenav
 */
@Component({
  selector: 'sidenav-autosize-example',
  templateUrl: 'sidenav-autosize-example.html',
  styleUrl: 'sidenav-autosize-example.css',
  standalone: true,
  imports: [
    MatSidenavModule,
    MatButtonModule,
    MatToolbarModule,
    TaskboardComponent,
    MatIconModule,
    ActivityLogComponent,
    CommonModule,
  ],
})
export class SidenavAutosizeExample {
  showFiller = false;
  opened = false;
  service = { historyPaged: { items: [{}] } };

  ShowMoreClick() {
    this.opened = !this.opened;
  }
}

Stackblitz 演示