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:

Solution 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.

Solution 2

I'd like to propose another approach, "more ionic-way", using its own components instead of a div an a few style rules.

The solution of Jay solves the problem via CSS, putting the sticky footer fixed to the bottom within the content. However, I've moved the component out of the , so, it will always remain at bottom of the page:

<ion-content>
  // Page content
</ion-content>
<ion-footer>
  // Footer content
</ion-footer>

To see an online example, I've created an StackBlitz here. I hope this could be useful for you (although a bit late), and for future readers.