Question

当我在我的项目中打开一个新表单时，我在顶部的固定内容是正常的，但我的滚动内容非常小，我不知道为什么：

我可以看到表单的第一行

我添加了我的HTML代码：

<ion-header>


<ion-header>
  <ion-navbar>
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
    </button>
     <ion-title>{{ pageTitle }}</ion-title>
  </ion-navbar>
</ion-header>


<ion-content has-tabs="true" padding="true">

  <div>
     <ion-item *ngIf="isEdited && !hideForm">
        <button
           ion-button
           item-right
           color="secondary"
           text-center
           block
           (click)="deleteEntry()">Supprimer ce cheval ?</button>
     </ion-item>


     <div *ngIf="hideForm">
        <ion-item class="post-entry-message" text-wrap>
           <h2>Bravo !</h2>
           <p>Peut-être que vous désirer éditer ou ajouter un nouveau cheval ?</p>
           <p>Retournez tout simplement au menu et séléctionner votre option</p>
        </ion-item>
     </div>


     <div *ngIf="!hideForm">
        <form [formGroup]="form" (ngSubmit)="saveEntry()">
           <ion-list>

              <ion-item-group>
                 <ion-item-divider color="light">Id du cheval *</ion-item-divider>
                 <ion-item>
                    <ion-input
                       type="text"
                       placeholder="Entrer un id"
                       formControlName="id"
                       [(ngModel)]="id"></ion-input>
                 </ion-item>
              </ion-item-group>

               [...]

              <ion-item>
                 <button
                    ion-button
                    color="primary"
                    text-center
                    block
                    [disabled]="!form.valid">Valider</button>
              </ion-item>


           </ion-list>
        </form>
     </div>
  </div>


</ion-content>

我尝试更改overtflow-x和overflow-y的值但是： - 就像照片上的那样小要么 - 我们无法滚动页面底部

Answer 1

将以下CSS添加到您的代码中

.scroll-content {
    height: calc(100% - 56px);
}

它是一个绝对的位置div。在你专门应用高度或在其中添加数据之前，它不会占用高度。

我的滚动内容非常小，为什么？

1 个答案: