Footer chevauche le formulaire de connexion en mode paysage mobile

Question

J'essaie de créer une page de connexion pour mon application. Elle comprend un en-tête, un formulaire de connexion horizontalement et verticalement centré et un pied de page. Tout fonctionne correctement en mode normal mais Je le charge en mode paysage mobile footer chevauche le formulaire de connexion. Peut-on m'aider à comprendre. Je sais que le problème est dû à pied de fond fixe, mais quand j'essaie de donner la position: absolue ou la position: par rapport au pied de page sauts près de l'en-tête

.full-width{width:100%;} 
 
.login-container{position: absolute;transform: translate(-50%, -50%);width: 330px;margin:auto;padding-bottom:100px;} 
 
.parent {position:fixed;top: 50%;left: 50%;transform: translateY(-50%);margin-top:60px}

<nav class="navbar navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed bottom-line" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 
 
     aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand logoLinkStyle" href="#"> 
 
     <img [src]="'application/images/logo.png'" alt="Brand logo"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav> 
 
<div class="parent"> 
 
<div class="row login-container"> 
 
    <div class="col-lg-12"> 
 
     <form name="form" #loginForm="ngForm" novalidate> 
 
     <h1 class="welcomeheading">WELCOME</h1> 
 
     <div class="form-group"> 
 
      <input class="form-control user" name="username" placeholder="Username" aria-label="Username" required autofocus> 
 
      </div> 
 
      
 
      <div class="form-group"> 
 
      <input class="form-control" placeholder="Password" type="password" name="password" aria-label="Password" required> 
 
      </div>   
 
      <button class="btn full-width" [disabled]="loading">Login</button> 
 
     <div class="login-forgot"> 
 
      <a href="javascript:void(0)">Forgot your password?</a> 
 
      </div> 
 
     </form> 
 
    </div>  
 
</div> 
 
</div> 
 
<div class="container-fluid" style="position: fixed;bottom: 0;width: 100%;"> 
 
    <div class="row"> 
 
    <div class="col-lg-10 col-sm-12"> 
 
     <h6>Copyright (c) 2017 this is the copyright of application developed 
 
     </h6> 
 
    </div> 
 
    <div class="col-lg-2 col-sm-12"> 
 
     <img [src]="FooterLogo" alt="Footer logo" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Vous pouvez ajouter un moi dia requête et supprimer le positionnement absolu sur mobile.

Il faudrait calculer votre point d'arrêt de la hauteur, mais il ressemblerait à quelque chose comme ceci:

@media screen and (max-height: 400px) { 
    .parent, .login-container { 
    position: static; 
    transform: none; 
    } 

    .footer { 
    position: relative; 
    } 
}