<mat-toolbar> changes height of all page

I am new to angular so please help me understand. I added a toolbar from angular material to my page, and it changed the height of my page. As you can see in the screenshot, my page is completely blank, but I can see this vertical scroll bar that scrolls the content exactly to the height of the toolbar.

Here is my code:

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

I tryed to move toolbar to outsite from mat-drawer-container but id doesnt work

I tried your code, ensure your component CSS contains the below

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

.full-height {
  height: 100%;
}

I just adjusted it so that the height is always full height, also I think the issue is coming from the additional padding in global-styles.scss, please refer the below stackblitz and try to check where the extra padding is getting added on the body!

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

FULL CODE:

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 Demo