文章/答案/技术大牛

发布

社区首页 >问答首页 >网页视图100%忽略html高度

问网页视图100%忽略html高度
EN

Stack Overflow用户

提问于 2015-09-23 09:05:11

回答 3查看 5.6K关注 0票数 4

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>
            &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>

android

css

webview

height

回答 3

Stack Overflow用户

发布于 2016-09-29 18:33:33

确保您的webview布局配置正确：

android:layout_height="match_parent“

如果您使用的是wrap_content，则zero视图本身将缩小为零，从而只显示空白页面。

票数 8

Stack Overflow用户

发布于 2015-09-23 11:30:02

在IE和chrome中显示红色，我建议使用height:100vh;而不是height: 100%;，因为这会将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>

票数 0

Stack Overflow用户

发布于 2016-08-24 05:37:37

我在这里也遇到了同样的问题：

Android WebView: how to let the css use the entire height w/ position absolute?

我回答了我自己的问题，问题是使用alignParent而不是match_parent。

我希望这是你的问题所在。

在任何情况下，试着给你的WebView加上一些边框，看看它到底停在哪里。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32729416

复制

相似问题

问网页视图100%忽略html高度
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网页视图100%忽略html高度EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网页视图100%忽略html高度
EN