CODEWITHSUNDEEP
htmlcssionic2
Rafał Gołubowicz
Rafał Gołubowicz

Reputation: 660

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

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

how should it works

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:

how it works

Upvotes: 8

Views: 28687

Answers (3)

Sema
Sema

Reputation: 187

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.

Upvotes: 7

Jay
Jay

Reputation: 1478

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.

Upvotes: 5

Eaves12
Eaves12

Reputation: 23

try 

height:100%;

it worked on for me just now.

Footer was extended as the items grew or shrank.

Upvotes: -1

Related Questions