为什么粘性/固定元素的一部分会在移动浏览器中脱离屏幕？

Question

在桌面浏览器中一切正常。但在移动浏览器中，无论如何首先滚动约 20px。较高元素中的所有边距和填充 = 0。你能帮我解决这个问题吗？

HTML：

<mat-toolbar color="primary">

  <app-my-svg style="min-width: 50px; max-width: 70%; padding-top: 10px;" #svgAnima class="svg-image"
    id="svgAnima" [mat-menu-trigger-for]="menu">
  </app-my-svg>
  <div class="hamburger">
    <mat-menu #menu="matMenu">
      <nav class="menu">
        <a mat-menu-item (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems">{{ item.label }}
        </a>
      </nav>
    </mat-menu>
  </div>

  <div class="navBar">
    <button mat-flat-button color="primary" (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems"
      class="menuBar">
      {{item.label }}
    </button>
  </div>

  <span>Zastroycogramm </span>

</mat-toolbar>

CSS：

mat-toolbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 50;
    max-height: 200px;
    width: 100%;
}

.menu {
    flex: 1;
    font-family: Roboto, 'Helvetica Neue', sans-serif; 
}

@media (min-width: 1000px) {
    .navBar {
        display: flex;
        width: 100%;
        align-items: center;
        font-family: Roboto, 'Helvetica Neue', sans-serif;

    }

    .hamburger {
        display: none;
    }
}

@media (max-width: 999px) {
    .navBar {
        display: none;
    }

    .hamburger {
        display: flex;
        width: 100%;
    }
}

我是一名新手程序员，下面我将添加您需要澄清这个问题的信息

Answer 1

我刚刚在CSS html中添加了body { height: 100% }