頁腳與移動橫向模式中的登錄表單重疊

Question

我正在嘗試爲我的應用程序創建一個登錄頁面。它包含一個標題，以水平和垂直居中的登錄表單以及一個頁腳。一切正常模式下都可以正常工作，我加載它在移動橫向模式頁腳重疊登錄窗體。任何人都可以幫助我如何弄清楚。我知道問題是由於固定頁腳底部，但當我嘗試給位置：絕對或位置：相對頁腳跳頭附近

.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

你可以添加一個我dia查詢並移除移動設備上的絕對定位。

你必須計算你的身高斷點，但它會是這個樣子：

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

    .footer { 
    position: relative; 
    } 
}