ion-content overlap with ion-header-bar

see:http://jsbin.com/pagacohovohe/1/edit

Give class="has-header" to ion-content.

<ion-content class="has-header">
</ion-content>

And you need to initialise your angular app - See javascript on my example. Note ng-controller and ng-app.

You may try to set 'has-subheader' class like this

    <ion-content class='has-header has-subheader'>
    ...
    </ion-content>

See: http://ionicframework.com/docs/components/#subheader

Came here having same problem with Ionic 2: Navbar overlaps content. In my case, it was because I had an *ngIf on ion-content. Solution was to move *ngIf into inner element, eg ng-container (Thanks @TwitchBronBron):

<ion-header>
  <ion-navbar>
    <ion-title>
      ...
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ng-container *ngIf="...">...</ng-container>
</ion-content>