ion-header内放置ion-toolbar导致ion-content无法完整滚动问题

问题根因 #

该滚动异常是因为Ionic的ion-content组件默认仅会识别ion-header内的单个toolbar高度来计算内容区域的顶部偏移，你在header内放置了2个toolbar，系统计算的预留高度不足，导致内容区域底部被多出来的toolbar高度遮挡，因此看起来可以滚动但无法展示全部内容。

解决方案 #

• 方案1：给ion-content添加fullscreen属性
  开启该属性后ion-content会自动计算整个header的总高度，重新适配滚动区域尺寸，绝大多数场景下添加后即可解决问题。修改后的代码参考如下：

<ion-header>
  <ion-toolbar class="large-title-fix">
    <ion-title>MyLinkedin</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-segment [(ngModel)]="type">
      <ion-segment-button value="Applicant" >
        <ion-label>Applicant</ion-label>
      </ion-segment-button>
      <ion-segment-button value="Offeror">
        <ion-label>Offeror</ion-label>
      </ion-segment-button>
      <ion-segment-button value="Company">
        <ion-label>Company</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
      <app-sign-up-applicant *ngIf="type==='Applicant'"></app-sign-up-applicant>
      <app-sign-up-offeror *ngIf="type==='Offeror'"></app-sign-up-offeror>
      <app-sign-up-company *ngIf="type==='Company'"></app-sign-up-company>
</ion-content>

• 方案2：手动设置顶部偏移变量
  如果添加fullscreen属性后仍未生效，可以在页面对应的CSS文件中添加如下样式，手动指定内容区的顶部偏移为2个toolbar的高度：

ion-content {
  --offset-top: calc(var(--ion-toolbar-height) * 2);
}

• 方案3：检查子组件样式
  确认你引入的三个自定义注册组件的根元素没有设置height: 100%这类固定高度属性，如有请修改为min-height: 100%或者height: auto，避免内容被组件本身截断。

内容的提问来源于stack exchange，提问作者simone russo