2015-09-23 53 views
3

webview不明白html高度100%是什麼意思,它只是顯示一個空白頁面。但是,在移動瀏覽器中,它工作得很好。誰能幫我?我已經經歷了很多建議,但都沒有成功。正如你在代碼中看到的那樣,我特意將html背景顏色設置爲紅色,以便我可以看到html文檔是否確實在我的webview上。我看不到任何純白色的紅色。html高度100%被webview忽略

它只適用於我硬設置高度,我不想這樣做。我的代碼如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1"> 
<title>WhyQ</title> 
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css"> 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<style> 
html{ 
    margin:0; 
    padding:0; 
    height:100%; 
    min-height:100%; 
    background-color:red; 
    position:relative; 
} 
body { 
    font-family: 'Titillium Web', sans-serif; 
    width: 100%; 
    min-height: 100%; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0; 
    background-color:red; /*#E9E9E9;*/ 
    position:relative; 
} 
</style> 
</head> 
<body style="position:relative"> 
<div style="overflow-y:hidden" class="container-fluid login-container"> 
    <div class="row" style="height:15%;"> 
     <div class="col-xs-12 txt-center full-height"></div> 
    </div> 

    <div class="row" style="height:13%;"> 
     <div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div> 
    </div> 

    <div class="row" style="height:5%;"> 
     <div class="col-xs-12 txt-center"></div> 
    </div> 

    <div class="row" style="height:30%;"> 
     <div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div> 
    </div> 

    <div class="row" style="height:20%;"> 
     <div class="col-xs-12 txt-center full-height"></div> 
    </div> 

    <div class="row" style="height:16%;"> 
     <div class="col-xs-12 txt-center full-height"> 
      <button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <a href="./new-order.php" class="btn btn-login btn-md" role="button" style="color:white">TRY IT</a> 
     </div> 
    </div> 
    <!-- Modal --> 
    <div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true"> 
     <div class="modal-dialog modal-dialog-loginForm"> 
     <div class="modal-content modal-content-loginForm"> 
      <div class="modal-body modal-body-loginForm"> 
       <div class="container-fluid"> 
        <div class="row-fluid" style="display:none" id="loginName"> 
         <input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/> 
        </div> 
        <div class="row-fluid"> 
         <input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/> 
        </div> 
        <div class="row-fluid"> 
         <input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/> 
        </div> 
        <div class="row-fluid" style="display:none" id="loginPwd2"> 
         <input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/> 
        </div> 
        <div class="row-fluid" style="display:none" id="loginPhone"> 
         <input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/> 
        </div> 
        <div class="row-fluid"> 
         <a href="#"><img class="icon border-radius-3" src="images/g-icon.png" alt="Google" /></a>&nbsp;&nbsp; 
         <a href="#"><img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" /></a> 
         <button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>&nbsp;&nbsp; 
         <button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button> 
         <!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//--> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

</div> 

回答

0

在IE和Chrome顯示紅色的,我可以代替推薦的height: 100%;使用height:100vh;,因爲這將在div設置爲視口高度的100%。一個div標籤不會自動佔用視圖端口的高度,你必須告訴它這樣做。還刪除了以下代碼作爲位置:relative;是爲Tgas而不是。也從行標記中刪除了高度樣式。你可以在CSS中設置,但高度應該爲每一行設置。

html{ 
 
    margin:0; 
 
    padding:0; 
 
    
 
} 
 
body { 
 
    font-family: 'Titillium Web', sans-serif; 
 
    width: 100%; 
 
    background-color:red; /*#E9E9E9;*/ 
 
    
 
} 
 
.cont-height { 
 
height: 100vh; 
 
}
<div class="container-fluid login-container cont-height"> 
 
    <div class="row" > 
 
     <div class="col-xs-12 txt-center full-height"></div> 
 
    </div> 
 

 
    <div class="row" > 
 
     <div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div> 
 
    </div> 
 

 
    <div class="row" > 
 
     <div class="col-xs-12 txt-center"></div> 
 
    </div> 
 

 
    <div class="row" > 
 
     <div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 txt-center full-height"></div> 
 
    </div> 
 

 
    <div class="row" > 
 
     <div class="col-xs-12 txt-center full-height"> 
 
      <button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button> 
 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
      <a href="./new-order.php" class="btn btn-login btn-md" role="button" style="color:white">TRY IT</a> 
 
     </div> 
 
    </div> 
 
    <!-- Modal --> 
 
    <div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true"> 
 
     <div class="modal-dialog modal-dialog-loginForm"> 
 
     <div class="modal-content modal-content-loginForm"> 
 
      <div class="modal-body modal-body-loginForm"> 
 
       <div class="container-fluid"> 
 
        <div class="row-fluid" style="display:none" id="loginName"> 
 
         <input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/> 
 
        </div> 
 
        <div class="row-fluid"> 
 
         <input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/> 
 
        </div> 
 
        <div class="row-fluid"> 
 
         <input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/> 
 
        </div> 
 
        <div class="row-fluid" style="display:none" id="loginPwd2"> 
 
         <input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/> 
 
        </div> 
 
        <div class="row-fluid" style="display:none" id="loginPhone"> 
 
         <input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/> 
 
        </div> 
 
        <div class="row-fluid"> 
 
         <a href="#"><img class="icon border-radius-3" src="images/g-icon.png" alt="Google" /></a>&nbsp;&nbsp; 
 
         <a href="#"><img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" /></a> 
 
         <button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>&nbsp;&nbsp; 
 
         <button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button> 
 
         <!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//--> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
</div>

+1

嗨,感謝您的回覆,但正如我指出的那樣,問題不在瀏覽器上,而是在web視圖上。我對瀏覽器沒有任何問題。但我會盡量使用vh。 – user3300845

4

確保您的WebView佈局正確配置:

機器人:layout_height = 「match_parent

如果您使用WRAP_CONTENT,web視圖本身會縮小到零,使只顯示空白頁面。