Ion-footer sticky to ion-content and bottom of screen

I wanna make ion-footer, which height will depend on content height, like that

Also , footer can't be smaller than on the 2 image (min-height).

Content is dynamically generated (ion-list *ngFor). This is my current pseudo-code

<ion-header>
  <ion-navbar>
    <ion-title>
      Title
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let item of items">
      {{ item.name}}
    </button>
  </ion-list>
</ion-content>

<ion-footer class="footer">
</ion-footer>

CSS:

.footer{
  background-color: blue;
  min-height: 10em;
  height: auto;
}

But it's never fill all empty space on the screen, i still have like that: