ionic2 - Ionic 2, ion-content of subcomponent overlapped by ion-header

Question

I have a page with an <ion-segment> that I use as a Tab to switch between showing two different custom components:

<ion-header>

  <ion-navbar>
    <ion-title>Page</ion-title>
  </ion-navbar>


  <ion-toolbar>
    <ion-segment [(ngModel)]="tab">
      <ion-segment-button value="section1">
        Section 1
      </ion-segment-button>
      <ion-segment-button value="section2">

        Section 2
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

</ion-header>

<section1 *ngIf="tab === 'section1'"></section1>
<section2 *ngIf="tab === 'section2'"></section2>

The section components just have an <ion-content> with stuff in it.

The problem is that if I do it this way, the content of the pages will be overlapped by the header. I've tried different ways to avoid this without success.

One way is to put the <ion-content> into the page like this:

<ion-content>
  <section1 *ngIf="tab === 'section1'"></section1>
  <section2 *ngIf="tab === 'section2'"></section2>
</ion-content>

But this gives rise to a new problem. If the page contains an <ion-refresher> it will give this error: Template parse errors: No provider for Content. Moving the refresher into the page as well isn't an option.

How to solve this overlapping issue while still keeping the <ion-content> in the custom components?

Answer 1

Waitting for answers