我的滚动内容很小，为什么？答案

【问题标题】：My scroll-content is very small, why?我的滚动内容很小，为什么？
【发布时间】：2018-11-05 16:35:12
【问题描述】：

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

我可以看到表单的第一行

我添加了我的 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 的值，但是： - 它像图片上的那样小要么 - 我们不能在页面底部滚动

【问题讨论】：

标签： html angularjs ionic-framework

【解决方案1】：

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

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

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

【讨论】：