要想用到100%必须所有的层级都用到100%,包括html，body。。。。。。（calc() 函数用于动态计算长度值。 ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)）
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>new webview</title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="background-color: white ;width:100%;height:100% ">
<header class=" mui-bar mui-bar-nav" style="position:relative;height:50px">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h3 id="mtitile" class="mui-title" >数据分析</h3>
</header>
<script type="text/javascript">
var valuee;
function myFunction(ttt) {
var h1 = document.getElementById('mtitile');
h1.innerHTML = ttt;
}
mui.plusReady(function() {
valuee = plus.webview.currentWebview().tyname;
mui.toast(valuee);
myFunction("数据分析("+valuee+")");
});
</script>
<ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: white ;width:100%;height:calc(100% - 50px) " >
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-2" style="width:50%;height:25%" >
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-2" style="width:50%;height:25% " >
<a href="#" >
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-2" style="width:50%;height:25% ">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-2" style="width:50%;height:25% ">
<a href="#" >
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-2" style="width:50%;height:25% ">
<a href="#" >
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-2" style="width:50%;height:25% ">
<a href="#" >
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-2" style="width:50%;height:25% ">
<a href="#" >
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-2" style="width:50%;height:25% ">
<a href="#" >
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
</body>
</html>
