javascript - Div 响应所有设备 Ionic

Question

我正在开发一个应用程序，但很难将 div 设置为底部的 100%。背景是白色的，想将其响应地放入其余设备中。我唯一能做的就是针对 iphone 6，对于其余部分，它会完全丢失，而 iphone x 的情况会变得更糟，因为它停留在设备的中间。

使用 ionic v3

我能够让它保持固定，这很有效，但是当键盘出现在设备上时，它覆盖了 ionic 列表。

.bg-initial {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/imgs/bg-login.png');
    background-size: cover;
    background-position: center;

  }

  .logo{
    width: 40%;
    text-align: center;
    margin: auto;

  }

  .btnLogin {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 350px;
    height: 60px;
    border-radius: 20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7500+0,ff0000+72,ff0000+100 */
    background: rgb(255,117,0); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(255,117,0,1) 0%, rgba(255,0,0,1) 72%, rgba(255,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,117,0,1) 0%,rgba(255,0,0,1) 72%,rgba(255,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,117,0,1) 0%,rgba(255,0,0,1) 72%,rgba(255,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7500', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  }

.btnEnter {
    width: 300px;
    border-radius: 20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7500+0,ff0000+72,ff0000+100 */
    background: rgb(255,117,0); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(255,117,0,1) 0%, rgba(255,0,0,1) 72%, rgba(255,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,117,0,1) 0%,rgba(255,0,0,1) 72%,rgba(255,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,117,0,1) 0%,rgba(255,0,0,1) 72%,rgba(255,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7500', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


  }

  .btnRgter{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 350px;
    height: 60px;
    border-radius: 20px;
    background: transparent;
    border: 1.5px solid $white-b;
  }

  .loginText {
    padding: 0px 40px;
    align-items: center;
    text-align: center;

  }

  .firstTime {
   text-align: right;
   padding: 2px 10px;
  }



  .bg-login {
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: 18px 18px 0px 0px;
    background-color: $white-b;
    padding-top: 18px;

  }


}

<ion-content class="bg-initial">
    <!--logo begin-->
    <div class="mg-top-10"></div>

    <div class="logo">
      <img src="../../assets/imgs/logo.png">
      </div>

      <!--logo end-->

      <!--sign Up begin-->
      <div *ngIf="signUp">

        <div class="loginText white-b no-margin font-12">
          <p>Seu Menu Online</p>
        </div>


        <div class="mg-top-10"></div>

        <div class="center bold white-b font-14">
          <p>Vamos Começar?</p>

        </div>

        <div class="btnLogin center mg-top-10">

          <button class="loginText bold white-b center font-14" ion-button clear (click)="fazerLogin()">
            Login
          </button>

        </div>

        <div class="btnRgter center mg-top-10">

          <div class="loginText bold white-b center font-14" ion-button clear (click)="createAccount()">
            Cadastre-se
          </div>

        </div>

        <p class="center white-b font-10" (click)="terms()">
          Termo de Uso
        </p>
      </div>
      <!--Sign Up End-->

      <!--Login Begin-->

            <div *ngIf="login" [@login]>

                <div class="firstTime white-b font-10 mg-top-10 bold" (click)="registerFirst()">
                  <p>Primeira vez por aqui?</p>
                </div>


                <div class="bg-login">
                  <ion-list>

                    <ion-item class="transparent-bg mg-top-10">
                      <ion-label class="font-10" floating>E-mail</ion-label>
                      <ion-input type="text"></ion-input>
                    </ion-item>

                    <ion-item class="transparent-bg">
                      <ion-label class="font-10" floating>Senha</ion-label>
                      <ion-input type="password"></ion-input>
                    </ion-item>

                  </ion-list>


                  <ion-grid>
                    <ion-row justify-content-center align-items-end style="height:100%">
                        <button class="loginText btnEnter bold white-b font-14" ion-button clear (click)="enter()">
                          ENTRAR
                        </button>
                      </ion-row>
                    </ion-grid>
                    <p class="black-b bold font-10 center no-margin padding-15">Esqueceu sua senha?</p>

                  </div>

                </div>

                <!--Login end-->

            </ion-content>

Answer 1

Ionic 网格是 Ionic 中确保您的组件处于正确位置的最佳方式。在这里检查:https://ionicframework.com/docs/api/grid