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

Question

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:

Answer 1

The ion-footer approach will not work here as ion-footer CSS style has absolute positioning. This means its height cannot be relative to ion-content height.

The required layout can be achieved by a different approach using flex.

<ion-content >
 <div style=" display: flex;flex-direction: column;height: 100%;">
     <ion-list padding-horizontal padding-top style="overflow-y: scroll;max-height: 90%;">
       <button ion-item *ngFor="let item of items">
       {{ item.name}}
      </button>
     </ion-list>
     <div style="flex: 1;background-color: blue;">Footer</div>
 </div>
</ion-content>

Remove ion-footer element from the HTML. This should give a similar layout.