rt 这里贴上用官方生成的代码，我只是把其他例子的内容填充进去了使得内容变得突出问题而已
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">文字选项卡</h1>
</header>
<div class="mui-content">
<h5></h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-divider">单行列表</li>
<li class="mui-table-view-cell">列表第1项</li>
<li class="mui-table-view-cell">列表第2项</li>
<li class="mui-table-view-cell">列表第3项</li>
<li class="mui-table-view-divider">两行列表</li>
<li class="mui-table-view-divider">单行列表</li>
<li class="mui-table-view-cell">列表第1项</li>
<li class="mui-table-view-cell">列表第2项</li>
<li class="mui-table-view-cell">列表第3项</li>
<li class="mui-table-view-divider">两行列表</li><li class="mui-table-view-divider">单行列表</li>
<li class="mui-table-view-cell">列表第1项</li>
<li class="mui-table-view-cell">列表第2项</li>
<li class="mui-table-view-cell">列表第3项</li>
<li class="mui-table-view-divider">两行列表</li><li class="mui-table-view-divider">单行列表</li>
<li class="mui-table-view-cell">列表第1项</li>
<li class="mui-table-view-cell">列表第2项</li>
<li class="mui-table-view-cell">列表第3项</li>
<li class="mui-table-view-divider">两行列表</li><li class="mui-table-view-divider">单行列表</li>
<li class="mui-table-view-cell">列表第1项</li>
<li class="mui-table-view-cell">列表第2项</li>
<li class="mui-table-view-cell">列表第3项</li>
<li class="mui-table-view-divider">两行列表</li><li class="mui-table-view-divider">单行列表</li>
<li class="mui-table-view-cell">列表第1项</li>
<li class="mui-table-view-cell">列表第2项</li>
<li class="mui-table-view-cell">列表第3项</li>
<li class="mui-table-view-divider">两行列表</li><li class="mui-table-view-divider">单行列表</li>
<li class="mui-table-view-cell">列表第1项</li>
<li class="mui-table-view-cell">列表第2项</li>
<li class="mui-table-view-cell">列表第3项</li>
<li class="mui-table-view-divider">两行列表</li>
</ul>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#">
电话沟通
</a>
<a class="mui-tab-item">
在线交流
</a>
<a class="mui-tab-item" href="#">
短信咨询
</a>
<a class="mui-tab-item" href="#">
查看地图
</a>
</nav>
</body>
</html>问题是，页面内容的最后会跟底部按钮框有冲突，导致有部分信息不能显示。
4 个回复
DCloud_UNI_CHB
.mui-bar的节点要放在.mui-content之前。
h***@163.com
请问后来解决了？我也出现这个问题
Dear郭 - dearguo
我认为如果写整个项目的话，最好底部还是公用一个好，用webview
1***@163.com
在最后一个div上面加margin-bottom 高度是你底部按钮的高度。是最后一部分内容的div上面加，相当于给了内容底部部分一个距离底部的距离，然后就刚好能完全展示出来了