Ionic custom component overlapping content

I created custom component, which is showing footer (need to have same footer on many pages). That's code of it:

<ion-footer class="fh">
  <ion-toolbar>
    Footer
  </ion-toolbar>
</ion-footer>

And CSS:

.fh .toolbar-background{
  background-color: blue;
}

.fh ion-toolbar{
  min-height: 15em;
  height: auto;
  max-height: 20em;
}

For example , this component named footer-h

I'd like to use it in pages, so:

<ion-header>
...
</ion-header>
<ion-content padding>
<ion-list>
...
</ion-list>
</ion-content>
<footer-h></footer-h>

It works, i mean footer shows, but there is problem that it's overlapping content (rest of items on list under footer and can't scroll).

But when I'll write page like that:

<ion-header>
...
</ion-header>
<ion-content padding>
<ion-list>
...
</ion-list>
</ion-content>
<ion-footer class="fh">
  <ion-toolbar>
    Footer
  </ion-toolbar>
</ion-footer>

everything is working, list is scrollable, nothing is overlaps.