title: ion-router-outlet is overlapped by ion-header
body: <p>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 <code>ion-router-outlet</code> basically ignores the header, and the <code>ion-content</code> is partly hidden behind the header. <strike>Of course I could add a padding-top to my content</strike> (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 <code>ion-content</code> 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 <code>fullscreen</code> in <code>&lt;ion-content&gt;</code>.</p>
  
  <p>main app component:</p>
  
  <pre><code>&lt;ion-app&gt;
      &lt;app-header&gt;&lt;/app-header&gt;
      &lt;ion-content fullscreen&gt;
          &lt;ion-router-outlet&gt;&lt;/ion-router-outlet&gt;
      &lt;/ion-content&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
  &lt;/ion-app&gt;
  </code></pre>
  
  <p>app-header:</p>
  
  <pre><code>&lt;ion-header&gt;
      &lt;h1&gt;my header&lt;/h1&gt;
  &lt;/ion-header&gt;
  </code></pre>
  
  <p>app-footer:</p>
  
  <pre><code>&lt;ion-tabs&gt;
      &lt;ion-tab-bar slot="bottom"&gt;
          &lt;ion-tab-button tab="foo"&gt;
              &lt;ion-label&gt;Foo&lt;/ion-label&gt;
          &lt;/ion-tab-button&gt;
          &lt;ion-tab-button tab="bar"&gt;
              &lt;ion-label&gt;Bar&lt;/ion-label&gt;
          &lt;/ion-tab-button&gt;
      &lt;/ion-tab-bar&gt;
  &lt;/ion-tabs&gt;
  </code></pre>
  
  <p>routes:</p>
  
  <pre><code>const routes: Routes = [
      {
          path: 'foo',
          loadChildren: './foo/foo.module#FooModule'
      },
      {
          path: 'bar',
          loadChildren: './bar/bar.module#BarModule'
      }
  ]
  </code></pre>