关于page中header和content的问题
我在index页面中的header标签中加入data-position="fixed"后首次刷新页面后，content中的内容会从屏幕顶端开始，导致被header中的内容覆盖；切换到其他Page后再回到index页面中，content中的内容又正常了从header后面开始显示，求大神指导如何才能让content始终从header后面开始显示并且header始终保持固定啊？非常感谢代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>KmcfApp</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link href="jqueryMobile/jquery.mobile-1.3.2.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/slick/slick.css">
<link rel="stylesheet" href="css/slick/slick-theme.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script src="jqueryMobile/jquery.mobile-1.3.2.js"></script>
<script src="js/slick/slick.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="index">
<script src="js/index.js"></script>
<div data-role="header" data-tap-toggle="false"
data-position="fixed" data-theme="d">
<div class="logoBg">
<img class="logo" src="./images/logo.png" />
</div>
</div>
<div data-role="content">
<div class="imagesSlide">
<div>
<img src="./images/slide/img1.png">
</div>
<div>
<img src="./images/slide/img2.png">
</div>
<div>
<img src="./images/slide/img3.png">
</div>
</div>
<div class="gridMenu ui-grid-b">
<div class="menuBlock ui-block-a">
<img src="./images/myAttention.png"> <span>我的关注</span>
</div>
<div class="menuBlock ui-block-b">
<img src="./images/intelligentException.png"> <span>智能异常</span>
</div>
<div class="menuBlock ui-block-c">
<img src="./images/artiException.png"> <span>人工异常</span>
</div>
<div class="menuBlock ui-block-a">
<img src="./images/postManagement.png"> <span>工位管理</span>
</div>
<div class="menuBlock ui-block-b">
<img src="./images/conferenceManagement.png"> <span>会议管理</span>
</div>
<div class="menuBlock ui-block-c">
<img src="./images/dataAnalysis.png"> <span>综合分析</span>
</div>
<div class="menuBlock ui-block-a">
<img src="./images/lifeService.png"> <span>生活服务</span>
</div>
<div class="menuBlock ui-block-b">
<img class="addIcon" src="./images/addMore.png">
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="indexNav"
data-tap-toggle="false" data-theme="d">
<div data-role="navbar">
<ul>
<li><a href="" id="toMainPage" data-icon="custom"
class="ui-btn-active ui-state-persist">首页</a></li>
<li><a href="./pages/myMessage.html" id="toMyMessage"
data-icon="custom">消息</a></li>
<li><a href="./pages/myInformation.html" id="toMyInformation"
data-icon="custom">我的</a></li>
</ul>
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
未来属于html5 所以来学习phonegap开发 收下，学习学习！！
页:
[1]