页脚 与ios设备上的登录表单重叠(Safari + Chrome)

Question

查看 Safari Macbook 和 Safari IphoneXI 正在使用角度 8 和角度材料。我设计了功能齐全的登录页面。我面临的问题是，在IOS设备上，即iPhone和iPad，无论是野生动物园还是chrome，页脚都与登录表单重叠。另一方面，在我的Macbook上，它在谷歌浏览器上运行良好，但在野生动物园上相同的页脚问题。谁能在这方面帮助我

我尝试@media查询，谷歌模拟器显示完美的响应，但在实际设备上，它不是谷歌设备模拟器显示的

<div class="login-page-background"> 
<div class="bg-image" fxLayout="column" >
<video  id="bgVideo" [autoplay]="true" [muted]="true" [loop]="true">
<source src="/assets/login.webm" type="video/webm">
</video>

<div class="login-page-header" fxLayoutAlign="center center">
<a href="../login">
<img style="height: 70px; margin-top: 20px" src="../assets/logoedited.png">
</a>
</div>
<div fxFlex fxLayout="column" style="margin-top: 20px">
<div>
<form [formGroup]="loginForm" (ngSubmit)="login()"  fxLayoutAlign="space-evenly center" >
<mat-card style="padding:35px; box-shadow:1px 1px 2px 1px rgba(45, 45, 45);; background: bottom ">
<mat-card-title>
<p style="font-size: medium; color: black"> Anmelden mit Ihrer Fioretto Systems ID </p>
</mat-card-title>
<mat-card-content fxLayout="column">
<div *ngIf="loginError" style="color: red">
Ungültiger Benutzername und oder Passwort
</div>

<mat-form-field>
<input type="email" matInput placeholder="E-Mail*"  formControlName="username" >
<div *ngIf="loginForm.controls.username.touched && loginForm.controls.username.errors">
<mat-error *ngIf="loginForm.controls.username.errors.email">
Geben Sie eine gültige E-Mail ein
</mat-error>
<mat-error *ngIf="loginForm.controls.username.errors.required">
E-Mail ist <strong>erforderlich</strong>
</mat-error>
</div>
</mat-form-field>
<br>
<mat-form-field>
<input matInput type="password" formControlName="password" placeholder="Passwort*" [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<div *ngIf="loginForm.controls.password.touched && loginForm.controls.password.errors">
<mat-error *ngIf="loginForm.controls.password.errors.required">
Passwort ist <strong>erforderlich</strong>
</mat-error>
</div>
</mat-form-field>
<div fxLayout="row" style="margin-top:15px" fxLayout="center center">

<div fxFlex="50">
<re-captcha (resolved)="resolved($event)" siteKey="6Lf617IUAAAAAPAj1hFPJ48dHR7b_AXvJWlllYdh"></re-captcha>
<div *ngIf="captchaError" style="color: red">
<strong>reCaptcha validieren</strong>
</div>
</div>
</div>
</mat-card-content>
<mat-card-actions style="text-align:right; margin-right: 0px">
<button type="submit" style="background:#184397" mat-raised-button color="primary">Login</button>
<br>
<a href="../login/"> <p style="color: #184397">Passwort vergessen</p></a>
</mat-card-actions>
</mat-card>
</form>
</div>

<div class="login-page-header" fxLayout="column" fxLayoutAlign="center center">
<a href="https://fioretto-group.com/" target="blank">
<img  src="../assets/FiorettoGroup.png" style= "width:380px;height:auto">
</a>
</div>
</div>
<div fxFlex>
<div *ngIf="loading">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
</div>
<div fxFlex></div>
<div class="app-footer">
<div fxLayout="row wrap" fxLayout.sm="column" fxLayout.xs="column">
<a fxFlex="33" href="https://mek-finanz.de/" target="blank" >
<img class="prtnr-cmp-img"  src="../assets/logo's-04.png" >
</a>
<a fxFlex="33"  href="https://fioretto-immobilien.de/" target="blank">
<img class="prtnr-cmp-img" src="../assets/logo's-02.png" >
</a>
<a fxFlex="33" href="https://birema.herokuapp.com/index.html" target="blank" >
<img class="prtnr-cmp-img"  src="../assets/BIR-07.png" >
</a>
<a fxFlex="33" href="https://fioretto-media.herokuapp.com/index.html" target="blank">
<img class="prtnr-cmp-img"  src="../assets/FIORETTO-MEDIA.png" >
</a>
<a fxFlex="33" href="https://airmage.herokuapp.com/index.html" target="blank">
<img class="prtnr-cmp-img"  src="../assets/logo's-06.png" >
</a>
<a fxFlex="33"  href="https://horai-detektei.de/" target="blank">
<img class="prtnr-cmp-img"  src="../assets/logo's-03.png" >
</a>
<a fxFlex="33" href="https://vario-import.com/" target="blank">
<img class="prtnr-cmp-img"  src="../assets/logo's-05.png" >
</a>
<a fxFlex="33" href="https://sterbe-vorsorge.de/" target="blank">
<img class="prtnr-cmp-img"  src="../assets/logo's-09.png" >
</a>
<a fxFlex="33" href="https://animatixs.herokuapp.com/index.html" target="blank" >
<img class="prtnr-cmp-img" src="../assets/logo's-01.png">
</a>
</div>

<div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="center center">
<p  class="footer-links"  style="font-size: small; margin-top: 10px"> © 2019 Fioretto GmbH & Co. KG | </p>
&nbsp;
<a [routerLink]="['/data-policy']" [queryParams]="{ id: '0'}" target="blank">
<p  class="footer-links"  style="font-size: small; margin-top: 10px"> Impressum | </p>
</a>
&nbsp;
<a [routerLink]="['/data-policy']" [queryParams]="{ id: '1'}" target="blank">
<p  class="footer-links"  style="font-size: small; margin-top: 10px"> Datenschutzbestimmungen | </p>
</a>
&nbsp;
<a [routerLink]="['/data-policy']" [queryParams]="{ id: '2'}" target="blank">
<p  class="footer-links"  style="font-size: small; margin-top: 10px">Cookies | </p>
</a>
&nbsp;
<a [routerLink]="['/data-policy']" [queryParams]="{ id: '3'}" target="blank">
<p class="footer-links" style="font-size: small; margin-top: 10px"> Nutzungsbedingungen</p>
</a>
</div>
</div>
</div>
</div>

.CSS

.login-page-background{
/* background-image: url('srcassetsnewbackground.gif'); */
width: 100%;
height: 100vh;
background-position: center;
overflow: auto;
background-size: cover;
overflow-x: hidden;
}
.login-page-header{
height: 110px;
}
.fioretto-image{
padding: 0px;
width: 100vh;
}
.prtnr-cmp-img{
filter: grayscale(100%);
width: 220px; 
height:36px;
margin: 15px 0px;
}
.prtnr-cmp-img:hover {
filter: contrast(150%);
}
.footer-links{
color: black;
}
video#bgVideo {
position: fixed; 
top: 0px; 
left: 0px; 
min-width: 100%;
min-height: 100%;
z-index: -1; 
}
@media only screen and (max-width : 700px){
video {
position: fixed;
}
/* .bg-image{
background-image: url('/assets/aaaa.png');
} */
}
/* IPad Pro */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {
.app-footer{
position: absolute;
bottom: 0px;
}
}
/* IPad */
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation : landscape) {
.app-footer{
position: inherit;
bottom: 0px;
}
}
.app-footer{
width: 100%;
text-align: center;
background-color:rgb(46, 48, 52);
height: auto;
opacity: 0.5;
background:rgb(195, 198, 204);
padding: 10px;
position: inherit;
bottom: 0px;
}

Answer 1

这是因为您正在为小屏幕设备的.app-footer使用position: absoulte。您应该让.app-footer与正常的文档流一起进行。无论如何，position: absoulte将.app-footer从正常流量中移除，并将其从底部0px。由于页脚是在表单之后定义的，因此页脚堆叠在表单上方，使其重叠。