'Ionic: automatic cap indents from the content

I need your help. I want to make the same header for all my application, so in app.component.html I prescribe ion_toolbar and ion-header before ion-router-outlet. However, I have a problem that this header of mine overlaps the content I have in the ion-router-outlet. I'm trying for the ion-toolbar to give margin-bottom: auto so that there are automatic deviations, but it doesn't react to that. Tell me, what is my mistake, how to make a hat and that it does not overlap the content? Thanks

app.component.html

<ion-app>
   <ion-toolbar>
    <ion-header>
      <div>header</div>
    </ion-header>
   </ion-toolbar>

  <ion-router-outlet></ion-router-outlet>
</ion-app>

app.component.scss

ion-toolbar {
   height: 75px;
   --margin-bottom: auto;
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source