Ionic 2, the ionic content of the subcomponent covered by the ionic header

Question

I have a page with <ion-segment>which 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 components of a section simply have <ion-content>with elements in it.

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

One way is to put <ion-content>on the page as follows:

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

But this poses a new problem. If the page contains <ion-refresher>, it will give the following error: Template parse errors: No provider for Content. Moving an update to a page is also not an option.

, <ion-content> ?