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>