ion-router-outlet is overlapped by ion-header

Question

In my Ionic4/Angular app I put the header and footer in their own components because they are the same on every page. When I do this, the ion-router-outlet basically ignores the header, and the ion-content is partly hidden behind the header. Of course I could add a padding-top to my content (Edit: actually, this too does not work, router-outlet always uses the complete screen - why?), but I think something else is wrong, isn't the purpose of the ion-content exactly this, to be smart enough to notice how big it needs to be? BTW, it doesn't make a difference if I omit the fullscreen in <ion-content>.

main app component:

<ion-app>
    <app-header></app-header>
    <ion-content fullscreen>
        <ion-router-outlet></ion-router-outlet>
    </ion-content>
    <app-footer></app-footer>
</ion-app>

app-header:

<ion-header>
    <h1>my header</h1>
</ion-header>

app-footer:

<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="foo">
            <ion-label>Foo</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="bar">
            <ion-label>Bar</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

routes:

const routes: Routes = [
    {
        path: 'foo',
        loadChildren: './foo/foo.module#FooModule'
    },
    {
        path: 'bar',
        loadChildren: './bar/bar.module#BarModule'
    }
]

Answer 1

Found the solution. The <ion-router-outlet></ion-router-outlet> is basically ignored, because <ion-tabs> also serves as a router-outlet and renders its content on the full viewport, only excluding the space for the tab-bar. This is why the <app-header> was overlapped.

The ion-tabs component does not have any styling and works as a router outlet in order to handle navigation.

source: https://ionicframework.com/docs/api/tabs

This mean I can simply use

<ion-app>
    <ion-tabs>
        <ion-tab-bar slot="bottom">
            <ion-tab-button tab="foo">
                <ion-label>Foo</ion-label>
            </ion-tab-button>
            <ion-tab-button tab="bar">
                <ion-label>Bar</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>
</ion-app>

in the main app component and place the <app-header> in the individual tabs.

Header is a parent component that holds the toolbar component. It's important to note that ion-header needs to be the one of the three root elements of a page

source: https://ionicframework.com/docs/api/header