Under ion-content how to size a child to take up available visible space?

I have a page with an ion-header, ion-content, and an ion-footer.

ion-content has a couple child nodes and then an empty space.

I would like to add a div whose height covers the empty space down to the footer but no further.

I made a number of attempts to no avail including adding a wrapping div with slot=“fixed” with a height of 100% but it extends beyond the footer. That at least prevents the scroll bar from showing.

To reproduce create a new tabs projects

ionic start myApp tabs

then copy the following markup into tab1.page.html:

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

<ion-content>

  <div slot="fixed" style="height: 100%; width: 100%">

    <h2>Height Sizing Sadness</h2>
    <h2>How can I restrict the height of the div below to not extend past the start of the footer?</h2>
    <div style="height: 100%; border: 1px solid;" id="problemdiv">
      Why does this div extend down behind the footer?  
    </div>

  </div>

</ion-content>
<ion-footer>
  <div>some text</div>
</ion-footer> 

The effect I want to achieve is to limit the size of #problemdiv to the space down to the top of the footer, but no further.

As a hack, I can calculate and set the size of the div myself explicitly but I would much prefer to do it “the right way”.

StackOverflow question is here: https://stackoverflow.com/questions/65171343/how-to-restrict-the-height-of-a-child-element-to-the-visible-height-of-an-ion-co

I must be missing something obvious. Any pointers would be much appreciated.

I am using Ionic 6/Angular 10:

   Ionic:

   Ionic CLI                     : 6.12.2 (/home/yml/.config/nvm/versions/node/v10.16.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.1
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.0 (/home/yml/.config/nvm/versions/node/v10.16.0/bin/node)
   npm    : 6.13.4
   OS     : Linux 5.3

1 post - 1 participant

Read full topic