webview不理解html高度100%意味着什么,它只是显示一个空白页面。然而,在移动浏览器中,它工作得很好。有人能帮我吗?我听了很多建议,但没有一个奏效。正如你在代码中看到的那样,我故意将html背景色设置为红色,这样我就可以看到html文档是否确实在我的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>
<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>
<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>
<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>
确保你的webview布局配置正确:
android: layout_height = " match_parent "
如果你使用wrap_content, webview本身将收缩为零,因此只显示空白页。
在IE和chrome中显示红色,我建议使用height:100vh;
代替height: 100%;
,因为这会将div设置为视图端口高度的100%。div标签不会自动获取视图端口的高度,您必须告诉它这样做。还删除了以下代码position: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>
<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>
<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>
<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>
我在这里遇到了同样的问题:
Android WebView:如何让css使用整个高度w/位置绝对?
我回答了自己的问题,问题是使用alignParent而不是match_parent。
我希望这就是你的问题所在。
无论如何,试着给你的WebView设置一些边框,看看它到底停在哪里