ion-content overlap with ion-header-bar

Solution 1:

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.

Solution 2:

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>

Solution 3:

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

Solution 4:

<ion-view view-title="BBS">
    <ion-header-bar class="bar bar-subheader">
        <div class="button-bar">
            <a class="button">web game</a>
            <a class="button">mobile game</a>
        </div>
    </ion-header-bar>
    <ion-content class="has-header">

    </ion-content>
</ion-view>