我正在开发一个应用程序，但很难将div的底部设置为100％。背景为白色，希望将其快速地放入其余设备中。我唯一能做的就是在iPhone 6上使用，而其余的则完全丢失，而且由于iPhone X停留在设备中间，因此情况变得更糟了。
使用离子v3
我能够将其固定，但可以使用，但是当键盘出现在设备上时，它覆盖了离子列表。
.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>